Building JS bundles for React Native

React Native EU 2018 talk

Transcript

1. Building JavaScript bundles for React Native Rafael Oleza @rafeca
2. What is Metro?
3. Why Metro • Fast • Scalable • Integrated
4. Anatomy of a JS bundle runtime module 1 ... module n startup code
5. Anatomy of a JS bundle module 1 ... module n startup code runtime • Register modules • Require modules
6. Anatomy of a JS bundle global.__d = function(factory, id) { modules[id] = { factory, loaded: false, module: {exports: {}}, }; } module 1 ... module n startup code runtime
7. 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
8. 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);
9. 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);
10. 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);
11. 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);
12. 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);
13. Anatomy of a JS bundle module 1 ... module n startup code runtime __r(0);
14. 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);
15. __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);
16. The bundling process
17. The bundling process 2 phases: • Build the Dependency Graph • Graph Serialization
18. The bundling process 2 phases: • Build the Dependency Graph • Graph Serialization
19. • Transform modules • Collect dependencies • Resolve dependencies Dependency Graph
20. Dependency Graph Input: ./index.js import foo from './foo'; import leftPad from 'left-pad'; // ...
21. Dependency Graph Input: Output: ./index.js import foo from './foo'; import leftPad from 'left-pad'; // ... const foo = require('./foo'); const leftPad = require('left-pad'); // ...
22. 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", ]
23. 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", ]
24. 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); // ... });
25. 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'; // ...
26. Dependency Graph ./node_modules/left-pad/index.js ./foo.js ./index.js ./bar.js ./baz.js
27. Dependency Graph ./node_modules/left-pad/index.js ./foo.js ./index.js ./bar.js ./baz.js
28. Dependency Graph Transforming files is slow • Parse JS into AST • Mutate AST • Generate JS & SourceMaps from AST
29. 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 } }
30. 1) Caching system • Fulfilled by a CI job • Makes initial builds considerably faster HTTP Remote cache
31. 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; }
32. 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!)
33. 3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js A ./index.js A ./foo.js A ./bar.js A ./baz.js
34. 3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js M ./foo.js
35. 3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js A ./new.js M ./bar.js ./new.js
36. 3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js M ./foo.js ./new.js
37. 3) Delta Bundler ./bar.js ./foo.js ./index.js ./baz.js M ./foo.js M ./bar.js D ./new.js ./new.js
38. Scalable by design 1) Caching system 2) Parallelization 3) Delta Bundler
39. The bundling process 2 phases: • Build the Dependency Graph • Graph Serialization
40. Graph Serialization • Takes the graph object as an input • Generates bundle from it
41. runtime module 1 ... module n startup code Plain JS bundle
42. 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
43. Random Access Modules bundle runtime module 1 ... module n startup code JS VM RN standard bundle
44. JS VM RN Random Access Modules bundle runtime startup code RAM bundle
45. Random Access Modules global.__r = function(id) { if (!modules[id]) { throw new Error(`Module ${id} not found`); } // ... }
46. 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
47. Random Access Modules More info: https://tinyurl.com/rambundles Reduced startup times Less memory consumption
48. Inline requires const foo = require('./foo'); const leftPad = require('left-pad'); export default function sayHi() { const message = `Hi ${foo.getName()}`; return leftPad(message, 4); }
49. Inline requires export default function sayHi() { const message = `Hi ${require('./foo').getName()}`; return require('left-pad')(message, 4); }
50. Inline requires const debugModule = require('./debug'); export default function sayHi() { if (__DEV__) { return debugModule(); } return 'Hi'; }
51. Inline requires const debugModule = require('./debug'); export default function sayHi() { return 'Hi'; }
52. Inline requires export default function sayHi() { if (__DEV__) { return require('./debug')(); } return 'Hi'; }
53. Inline requires export default function sayHi() { return 'Hi'; }
54. Takeaways Slow build times? Use remote cache https://tinyurl.com/metrocaches Slow app startup? Use RAM bundles https://tinyurl.com/enablerambundles
55. Thanks! https://github.com/facebook/metro