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
Laravel Boost 超入門
fire_arlo
3
220
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
210
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
Ruby Parser progress report 2025
yui_knk
1
460
1から理解するWeb Push
dora1998
7
1.9k
概念モデル→論理モデルで気をつけていること
sunnyone
3
290
個人軟體時代
ethanhuang13
0
330
print("Hello, World")
eddie
2
530
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Thoughts on Productivity
jonyablonski
70
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Building Adaptive Systems
keathley
43
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Into the Great Unknown - MozCon
thekraken
40
2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The World Runs on Bad Software
bkeepers
PRO
70
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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