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