Explore enabling ESM code splitting with dynamic imports for optional features

[Copilot]

Sets up esbuild code splitting for ESM builds and implements dynamic imports to lazy-load optional features, reducing initial bundle size by ~17%.

esbuild configuration

• Enable splitting: true with chunkNames: 'chunks/[name]-[hash]'
• Switch from outfile to outdir + entryNames (required for splitting)
• Add outExtension: { '.js': '.mjs' } for ESM output
• Demo server kept as CJS with splitting: false

Dynamic imports

xterm.js core:

• AccessibilityManager — loaded when screenReaderMode enabled (~16KB)
• OverviewRulerRenderer — loaded when overviewRuler.width set (~11KB)

WebGL addon:

• CustomGlyphDefinitions — loaded on first custom glyph render (~200KB)

let module: Promise<typeof import('./Module')> | undefined;
function loadModule(): Promise<typeof import('./Module')> {
  if (!module) module = import('./Module');
  return module;
}

loadModule().then(m => {
  if (/* conditions still valid */) {
    // use m.Export
  }
}).catch(() => { /* graceful fallback */ });

Bundle impact (dev build)

Bundle	Before	After
xterm.mjs	754KB	625KB
addon-webgl.mjs	454KB	244KB

Demo

• Updated HTML to reference .mjs with type="module"

Original prompt

Set up code splitting for the esm build. Don't worry about breaking backwards compatibility or the single xterm.js bundle

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.