Unbundling the Future Web Runtime

transcript

The native integration of ES modules into the web

JavaScript build tooling

SystemJS

Web Assembly

/page1.html /page2.html

Static import Dynamic import

ESM WASM

ESM ESMESM 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

ESM WASM

ESM ESMESM

ESM ESM

System.register WASM

System.register

IsomorphicModular Runtime

How is the native module loader useful?

The native module loader enables codesharing across pages and lazy loaded code

Optimization

ESM WASM

ESM ESMESM

ESMESM

ESM ESM

ESM WASM

ESM ESMESM

ESMESM

ESM ESM

ESM WASM

ESM ESMESM

ESM ESM

ESM ESMESM

ESM ESM

ESM ESMESM

ESM ESM

xy.js z.js

ESM ESMESM

ESM ESM

ESMESM

ESM ESM

Output Generation

ESM ESMESM

ESM 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

Unbundling the Future Web Runtime

Technology