Bundling without a bundler with esm.sh

Bundling without a bundler with esm.sh

esm.sh now generates single-file bundles for browser imports, reducing network overhead. A developer demonstrated this by bundling 12+ dependencies into a single URL, cutting initial load complexity.

Why This Matters

Traditional bundlers like Webpack optimize load times by combining files, but setting them up adds tooling complexity. esm.sh eliminates this friction but risks slower initial loads if dependencies aren’t pre-bundled. The tradeoff is between developer convenience and runtime performance.

Key Insights

• “esm.sh/~e4d1ab3ba39fc16e6de014e6f19bd819605fdd95?bundle” generates a single bundle URL for multiple imports
• Import maps with wildcards (“@codemirror/*”) handle transitive dependencies but require manual version alignment
• TypeScript type resolution requires explicit .d.ts files for default exports

Working Example

<script type="importmap">
{
"imports": {
"codemirror": "/deps/editor.deps.js"
}
}
</script>

// /deps/editor.deps.js
import build from "https://esm.sh/build";
const ret = await build({
dependencies: {
"codemirror": "^6.0.1",
"@valtown/codemirror-ts": "^2.3.1"
},
source: `import ts from "typescript"; ...` // full import tree
});
const { ts, EditorView } = await import(ret.bundleUrl);
export { ts, EditorView };

Practical Applications

• Use Case: Web editors using Codemirror with TypeScript plugins
• Pitfall: Over-reliance on dynamic imports without pre-bundling increases initial load latency

References:

• https://dev.to/louwers/bundling-without-a-bundler-with-esmsh-3c2k

---