View
1.148
Download
0
Category
Preview:
Citation preview
The native integration of ES modules into the web
JavaScript build tooling
SystemJS
Web Assembly
/page1.html /page2.html
ESM
Static import Dynamic import
ESM WASM
ESM ESMESM ESM
ESM
ESM
ESM
Build tools don’t have to be taken by surprise
We can already investigate this future
SystemJS Built on top of es-module-loader
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
System.register WASM
System.register
System.register
System.register
System.register
System.register
/page1.html /page2.html
System.register
System.register
System.register
IsomorphicModular Runtime
How is the native module loader useful?
The native module loader enables codesharing across pages and lazy loaded code
Optimization
/page1.html /page2.html
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESMESM
ESM ESM
x.js
y.js
x.js
/page1.html /page2.html
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESMESM
ESM ESM
Static import Dynamic import
ESM WASM
ESM ESMESM
ESM
ESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
x.js
y.js
z.js
xy.js z.js
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
Static import Dynamic import
WASM
ESMESM
/page1.html /page2.html
ESM
ESM ESM
Output Generation
Static import Dynamic import
WASM
ESM ESMESM
/page1.html /page2.html
ESM
ESM ESM
ESM ESM
Static import Dynamic import
WASM
ESM
/page1.html /page2.html
ESM
Express optimization strategies
Visual tools for optimization management
Tree shaking Web Assembly
Automatically extract repeated functions
Module splitting
Fine-grained Module Graph
language compilers
ProductionModule Graph
Production Build Artefacts
optimizationsoutput
generation
Our tools should fully expose the module graph to cross-module optimizations.
This will allow for better performance optimization today, while also leading the way to native module workflows.
Thanks
@guybedford
Recommended