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
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
rage against annotate_predecessor
junk0612
0
160
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Namespace and Its Future
tagomoris
6
700
Swift Updates - Learn Languages 2025
koher
2
470
Rancher と Terraform
fufuhu
2
240
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.2k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
500
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
210
TDD 実践ミニトーク
contour_gara
1
290
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Unsuck your backbone
ammeep
671
58k
For a Future-Friendly Web
brad_frost
180
9.9k
A designer walks into a library…
pauljervisheath
207
24k
Become a Pro
speakerdeck
PRO
29
5.5k
A Tale of Four Properties
chriscoyier
160
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Making Projects Easy
brettharned
117
6.4k
Thoughts on Productivity
jonyablonski
70
4.8k
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