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
420
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
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
はじめての Go * WASM * OCR
sgash708
1
120
ML.NETで始める機械学習
ymd65536
0
240
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
740
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
[JAWS DAYS 2025] 最近の DB の競合解決の仕組みが分かった気になってみた
maroon1st
0
160
良いコードレビューとは
danimal141
9
5.9k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
240
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
20
4.3k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
320
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Rails Girls Zürich Keynote
gr2m
94
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
4 Signs Your Business is Dying
shpigford
183
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
It's Worth the Effort
3n
184
28k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Faster Mobile Websites
deanohume
306
31k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
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