Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building JS bundles for React Native
Search
Rafael de Oleza
September 06, 2018
Programming
2
430
Building JS bundles for React Native
React Native EU 2018 talk
Rafael de Oleza
September 06, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
Is Xcode slowly dying out in 2025?
uetyo
1
260
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
440
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
920
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Team operations that are not burdened by SRE
kazatohiei
1
310
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
170
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
240
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
650
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
The Language of Interfaces
destraynor
158
25k
Navigating Team Friction
lara
187
15k
Code Reviewing Like a Champion
maltzj
524
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How GitHub (no longer) Works
holman
314
140k
Rails Girls Zürich Keynote
gr2m
94
14k
Being A Developer After 40
akosma
90
590k
Speed Design
sergeychernyshev
32
1k
Transcript
Building JavaScript bundles for React Native Rafael Oleza @rafeca
What is Metro?
Why Metro • Fast • Scalable • Integrated
Anatomy of a JS bundle runtime module 1 ... module
n startup code
Anatomy of a JS bundle module 1 ... module n
startup code runtime • Register modules • Require modules
Anatomy of a JS bundle global.__d = function(factory, id) {
modules[id] = { factory, loaded: false, module: {exports: {}}, }; } module 1 ... module n startup code runtime
Anatomy of a JS bundle global.__r = function(id) { if
(!modules[id]) { throw new Error(`Module ${id} not found`); } const {module, factory, loaded} = modules[id]; if (loaded) { return module.exports; } modules[id].loaded = true; factory(global, global.__r, module, module.exports); return module.exports; } module 1 ... module n startup code runtime
Anatomy of a JS bundle module 1 ... module n
startup code runtime __d(function(global, require, module, exports) { 'use strict'; const foo = require(22); module.exports = foo; }, 1673);
Anatomy of a JS bundle module 1 ... module n
startup code runtime __d(function(global, require, module, exports) { 'use strict'; const foo = require(22); module.exports = foo; }, 1673);
Anatomy of a JS bundle module 1 ... module n
startup code runtime __d(function(global, require, module, exports) { 'use strict'; const foo = require(22); module.exports = foo; }, 1673);
Anatomy of a JS bundle module 1 ... module n
startup code runtime __d(function(global, require, module, exports) { 'use strict'; const foo = require(22); module.exports = foo; }, 1673);
Anatomy of a JS bundle module 1 ... module n
startup code runtime __d(function(global, require, module, exports) { 'use strict'; const foo = require(22); module.exports = foo; }, 1673);
Anatomy of a JS bundle module 1 ... module n
startup code runtime __r(0);
Anatomy of a JS bundle __r(0); (function(global) { const modules
= Object.create(null); global.__d = function(factory, id) { modules[id] = { factory, module: {exports: {}}, loaded: false, }; } global.__r = function(id) { if (!modules[id]) { throw new Error(`Module ${id} not found`); } const {module, factory, loaded} = modules[id]; if (loaded) { return module.exports; } modules[id].loaded = true; factory(global, global.__r, module, module.exports); return module.exports; } })(this); __d(function(global, require, module, exports) { const foo = require(1); module.exports = foo; }, 0); __d(function(global, require, module, exports) { module.exports = 'Hello, world'; }, 1);
__d(function(global, require, module, exports) { const foo = require(1); module.exports
= foo; }, 0); __d(function(global, require, module, exports) { module.exports = 'Hello, world'; }, 1); (function(global) { const modules = Object.create(null); global.__d = function(factory, id) { modules[id] = { factory, module: {exports: {}}, loaded: false, }; } global.__r = function(id) { if (!modules[id]) { throw new Error(`Module ${id} not found`); } const {module, factory, loaded} = modules[id]; if (loaded) { return module.exports; } modules[id].loaded = true; factory(global, global.__r, module, module.exports); return module.exports; } })(this); Anatomy of a JS bundle __r(0);
The bundling process
The bundling process 2 phases: • Build the Dependency Graph
• Graph Serialization
The bundling process 2 phases: • Build the Dependency Graph
• Graph Serialization
• Transform modules • Collect dependencies • Resolve dependencies Dependency
Graph
Dependency Graph Input: ./index.js import foo from './foo'; import leftPad
from 'left-pad'; // ...
Dependency Graph Input: Output: ./index.js import foo from './foo'; import
leftPad from 'left-pad'; // ... const foo = require('./foo'); const leftPad = require('left-pad'); // ...
Dependency Graph Input: Output: ./index.js import foo from './foo'; import
leftPad from 'left-pad'; // ... const foo = require(1); const leftPad = require(2); // ... [ "./foo", "left-pad", ]
Dependency Graph Input: Output: ./index.js import foo from './foo'; import
leftPad from 'left-pad'; // ... __d(function(global, require) { const foo = require(1); const bar = require(2); // ... }); [ "./foo", "left-pad", ]
Dependency Graph ./foo.js ./index.js Input: import foo from './foo'; import
leftPad from 'left-pad'; // ... Output: [ "./foo", "left-pad", ] __d(function(global, require) { const foo = require(1); const bar = require(2); // ... });
Dependency Graph ./node_modules/left-pad/index.js ./foo.js ./index.js Input: Output: [ "./foo", "left-pad",
] __d(function(global, require) { const foo = require(1); const bar = require(2); // ... }); import foo from './foo'; import leftPad from 'left-pad'; // ...
Dependency Graph ./node_modules/left-pad/index.js ./foo.js ./index.js ./bar.js ./baz.js
Dependency Graph ./node_modules/left-pad/index.js ./foo.js ./index.js ./bar.js ./baz.js
Dependency Graph Transforming files is slow • Parse JS into
AST • Mutate AST • Generate JS & SourceMaps from AST
1) Caching system • Extensible • Layered architecture class MyCacheStore
{ async get(key) { // Return value } async set(key, value) { // Set value } async clear() { // Clear all cached values } }
1) Caching system • Fulfilled by a CI job •
Makes initial builds considerably faster HTTP Remote cache
2) Parallelization jest-worker main.js import Worker from 'jest-worker'; async function
main() { const worker = new Worker('./worker.js'); const result = await worker.hello('Alice'); } worker.js export function hello(param) { return 'Hello, ' + param; }
3) Delta Bundler • Available in dev mode • Avoids
regenerating the Dependency Graph • Sends only changes to the devices • Enabled by default in Android (iOS soon!)
3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js A ./index.js A
./foo.js A ./bar.js A ./baz.js
3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js M ./foo.js
3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js A ./new.js M
./bar.js ./new.js
3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js M ./foo.js ./new.js
3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js M ./foo.js M
./bar.js D ./new.js ./new.js
Scalable by design 1) Caching system 2) Parallelization 3) Delta
Bundler
The bundling process 2 phases: • Build the Dependency Graph
• Graph Serialization
Graph Serialization • Takes the graph object as an input
• Generates bundle from it
runtime module 1 ... module n startup code Plain JS
bundle
Random Access Modules bundle MOD_0_LENGTH MOD_0_OFFSET MOD_1_LENGTH MOD_1_OFFSET … 0xFB0BD1E5
NUM_MODULES MOD_0 \0 MOD_1 \0 START \0 … START_LENGTH 00 32 64 Header Table of contents List of modules
Random Access Modules bundle runtime module 1 ... module n
startup code JS VM RN standard bundle
JS VM RN Random Access Modules bundle runtime startup code
RAM bundle
Random Access Modules global.__r = function(id) { if (!modules[id]) {
throw new Error(`Module ${id} not found`); } // ... }
Random Access Modules global.__r = function(id) { if (!modules[id]) {
nativeRequire(id); } // ... } MOD_0_LEN MOD_0_OFF MOD_1_LEN MOD_1_OFF … 0xFB0BD1E5 NUM_MODULES MOD_0 \0 MOD_1 \0 START \0 … START_LEN 00 32 64
Random Access Modules More info: https://tinyurl.com/rambundles Reduced startup times Less
memory consumption
Inline requires const foo = require('./foo'); const leftPad = require('left-pad');
export default function sayHi() { const message = `Hi ${foo.getName()}`; return leftPad(message, 4); }
Inline requires export default function sayHi() { const message =
`Hi ${require('./foo').getName()}`; return require('left-pad')(message, 4); }
Inline requires const debugModule = require('./debug'); export default function sayHi()
{ if (__DEV__) { return debugModule(); } return 'Hi'; }
Inline requires const debugModule = require('./debug'); export default function sayHi()
{ return 'Hi'; }
Inline requires export default function sayHi() { if (__DEV__) {
return require('./debug')(); } return 'Hi'; }
Inline requires export default function sayHi() { return 'Hi'; }
Takeaways Slow build times? Use remote cache https://tinyurl.com/metrocaches Slow app
startup? Use RAM bundles https://tinyurl.com/enablerambundles
Thanks! https://github.com/facebook/metro