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;

Bundling

Demo

Code Splitting

Demo

Comments?

Questions?

Code Loading

By mikesherov

Code Loading

  • 1,096

More from mikesherov