Code Loading
Moving Bits, Not Atoms
Mike Sherov
VP of UMD, AMD, CJS, ESM and other such acronyms
Overview
- What is Code Loading?
- A Comparative History
- Bundling
- Code Splitting
What is Code Loading?
The process by which a browser requests, receives, and executes code from a server. This could be HTML, CSS, or JS.
- Me, Just Now
A Comparative History
- AMD
- CJS
- ESM
AMD
- Created By James Burke (thanks!)
- Intended for the Browser:
- Async
- callback based
- function scoping
- Optimized with r.js
AMD
define([
'the/module'
], function(TheModule) {
const a = TheModule('hello world');
return a
});CJS
- Created By Kevin Dangoor
- Intended for the Server:
- synchronous
- statement based
- file scoping
- Optimized by many tools
- Browserify brought it to the web
CJS
const TheModule = 'the/module';
const a = TheModule('hello world');
module.exports = a;static ESM
- Created By Yehuda Katz & Dave Herman
- Intended for all JS:
- async, but sync *looking*
- loaded ahead of evaluation
- statement based
- Optimized by many tools
static ESM
import TheModule from 'the/module';
const a = TheModule('hello world');
export default a;dynamic ESM
- Created By Domenic Denicola
- Intended for all JS:
- async
- loaded just in time
- promise based
- Optimized by many tools
- indicates a "code split" point
dynamic ESM
async function initTextEditor() {
const namespaceRecord = await import('textEditor');
const TextEditor = namespaceRecord.default;
const a = TextEditor('hello world');
return a;
}
export default doItLater;