mirror of
https://github.com/status-im/metro.git
synced 2025-02-10 10:07:12 +00:00
46 lines
12 KiB
HTML
46 lines
12 KiB
HTML
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Bundling · Metro</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Bundling · Metro"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/metro/index.html"/><meta property="og:description" content="When bundling, each of the modules gets assigned a numeric id, meaning no dynamic requires are supported. Requires are changed by its numeric version, and modules are stored in different possible formats. Three different formats of bundling are supported:"/><meta property="og:image" content="/metro/img/opengraph.png"/><link rel="shortcut icon" href="/metro/img/favicon/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="/metro/css/main.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="Metro Blog ATOM Feed"/> <link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="Metro Blog RSS Feed"/><script async="" defer="" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/metro/js/webplayer.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/metro/"><img class="logo" src="/metro/img/metro.svg"/><h2 class="headerTitle">Metro</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/metro/docs/en/getting-started.html" target="_self">Docs</a></li><li><a href="/metro/docs/en/api.html" target="_self">API</a></li><li><a href="/metro/en/help.html" target="_self">Help</a></li><li><a href="/metro/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/metro" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Introduction</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Introduction</h3><ul><li class="navListItem"><a class="navItem" href="/metro/docs/en/getting-started.html#content">Getting Started</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/metro/docs/en/bundling.html#content">Bundling</a></li></ul></div><div class="navGroup navGroupActive"><h3>API Reference</h3><ul><li class="navListItem"><a class="navItem" href="/metro/docs/en/api.html#content">API</a></li><li class="navListItem"><a class="navItem" href="/metro/docs/en/configuration.html#content">Configuring Metro</a></li><li class="navListItem"><a class="navItem" href="/metro/docs/en/cli.html#content">Metro CLI Options</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/metro/docs/en/troubleshooting.html#content">Troubleshooting</a></li></ul></div></div></section></div><script>
|
||
var toggler = document.getElementById('navToggler');
|
||
var nav = document.getElementById('docsNav');
|
||
toggler.onclick = function() {
|
||
nav.classList.toggle('docsSliderActive');
|
||
};
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/metro/edit/master/docs/Bundling.md" target="_blank">Edit this Doc</a><h1>Bundling</h1></header><article><div><p>When bundling, each of the modules gets assigned a numeric id, meaning no dynamic requires are supported. Requires are changed by its numeric version, and modules are stored in different possible formats. Three different formats of bundling are supported:</p><h2><a class="anchor" name="plain-bundle"></a>Plain bundle <a class="hash-link" href="#plain-bundle">#</a></h2><p>This is the standard bundling format. In this format, all files are wrapped with a function call, then added to the global file. This is useful for environments that expect a JS only bundle (e.g. a browser). Just requiring the entry point with the <code>.bundle</code> extension should trigger a build of it.</p><h2><a class="anchor" name="indexed-ram-bundle"></a>Indexed RAM bundle <a class="hash-link" href="#indexed-ram-bundle">#</a></h2><p>This format composes the bundle as a binary file, which format has the following parts (all numbers are expressed in Little Endian):</p><ul><li>A magic number: a <code>uint32</code> must be located at the beginning of the file, with the value '0xFB0BD1E5'. This is used to verify the file.</li><li>An offset table: the table is a sequence of <code>uint32</code> pairs, with a header<ul><li>For the header, two <code>uint32</code>s can be found: the length of the table, and the length of the startup code.</li><li>For the pairs, they represent the offset in the file and the length of code module, in bytes.</li></ul></li><li>Each of the modules, finished by a null byte (<code>\0</code>).</li></ul><pre class="prism language-javascript"><span class="token template-string"><span class="token string">` 0 1 2 3 4 5 6
|
||
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
||
| Magic number | Header size |
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
||
| Startup code size | Module 0 offset |
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
||
| Module 0 length | |
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ +
|
||
| |
|
||
+ ... +
|
||
| |
|
||
+ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
||
| | Module n offset |
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
||
| Module n length | Module 0 code | Module 0 code | ... | \0 |
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
||
| Module 1 code | Module 1 code | ... | \0 | |
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ +
|
||
| |
|
||
+ ... +
|
||
| |
|
||
+ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|
||
| | Module n code | Module n code | ... | \0 |
|
||
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+`</span></span></pre><p>This structure is optimal for an environment that is able to load all code in memory at once:</p><ul><li>By using the offset table, one can load any module in constant time, where the code for module <code>x</code> is located at <code>file[(x + 3) * sizeof(uint32)]</code>. Since there is a null character (<code>\0</code>) separating all modules, usually length does not even need to be used, and the module can be loaded directly as an ASCIIZ string.</li><li>Startup code is always found at <code>file[sizeof(uint32)]</code>.</li></ul><p>This bundling is usually used by iOS.</p><h2><a class="anchor" name="file-ram-bundle"></a>File RAM bundle <a class="hash-link" href="#file-ram-bundle">#</a></h2><p>Each module is stored as a file, with the name <code>js-modules/${id}.js</code>, plus an extra file called <code>UNBUNDLE</code> is created, which its only content is the magic number, <code>0xFB0BD1E5</code>. Note that the <code>UNBUNDLE</code> file is created at the root.
|
||
This bundling is usually used by Android, since package contents are zipped, and access to a zipped file is much faster. If the indexed format was used instead, all the bundled should be unzipped at once to get the code for the corresponding module.</p></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="getting-started.html#content">← Previous</a><a class="docs-next button" href="api.html#content">Next →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/metro/" class="nav-home"><img src="/metro/img/metro.svg" alt="Metro" width="66" height="58"/></a><div><h5>Docs</h5><a href="/metro/docs/en/getting-started.html">Getting Started</a><a href="/metro/docs/en/api.html">API Reference</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/metrojs" target="_blank">Stack Overflow</a><a href="https://twitter.com/MetroBundler" target="_blank">Twitter</a></div><div><h5>More</h5><a href="/metro/blog">Blog</a><a href="https://github.com/facebook/metro">GitHub</a><a class="github-button" href="https://github.com/facebook/metro" data-icon="octicon-star" data-count-href="/facebook/metro/stargazers" data-count-api="/repos/facebook/metro#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/metro/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 Facebook Inc.</section></footer></div><script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-44373548-17', 'auto');
|
||
ga('send', 'pageview');
|
||
</script><script>
|
||
var search = docsearch({
|
||
apiKey: '0cf53e80b4f3b371219cdcaa6b62e08b',
|
||
indexName: 'metro',
|
||
inputSelector: '#search_input_react'
|
||
});
|
||
</script></body></html> |