How to reduce bundle size in Eleventy builds

This diagnostic guide identifies and eliminates payload bloat in Eleventy build outputs. Focus on asset pipeline configuration, selective JavaScript loading, and build-time optimization for production deployments. These strategies align with established Performance Optimization & Core Web Vitals for SSGs methodologies to guarantee minimal payload delivery.

Key optimization targets include auditing with eleventy --dryrun and implementing eleventyComputed for conditional loading. Configure @11ty/eleventy-plugin-bundle for scoped assets and strip unused dependencies via esbuild. Defer client-side interactivity using JavaScript Hydration & Partial Rendering patterns.

Audit Build Output & Identify Bloat

Establish baseline metrics and locate oversized assets before applying optimizations. Run a dry execution to inspect template rendering without writing files to disk.

npx @11ty/eleventy --dryrun

Quantify file sizes across the output directory using standard Unix utilities. Sort results to immediately surface the largest offenders.

find _site -type f -name '*.js' -exec du -h {} + | sort -rh

Cross-reference these metrics with Lighthouse bundle analysis. Identify duplicated polyfills, framework overhead, and unoptimized vendor chunks.

Implement Scoped Asset Bundling

Isolate JavaScript and CSS to specific templates to prevent global injection. Replace legacy <script> tags in base layouts with scoped {% js %} blocks.

Install the official bundling plugin as a development dependency.

npm i -D @11ty/eleventy-plugin-bundle

module.exports = function(eleventyConfig) {
 eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-bundle"), {
 bundleName: "js",
 minify: process.env.ELEVENTY_ENV === "production"
 });
};

This configuration enables scoped template tags and applies compression exclusively during production builds. Defer non-critical execution by appending type="module" to your script references.

Integrate esbuild for Production Minification

Replace legacy Terser or Uglify workflows with a modern, tree-shaking capable bundler. Install esbuild and configure a pre-build compilation step.

npm i -D esbuild

Execute a targeted compilation command to bundle, minify, and strip dead code.

npx esbuild src/scripts/index.js --bundle --minify --sourcemap --target=es2020 --outfile=_site/assets/bundle.js

Map the compiled output to your static directory using Eleventy's passthrough copy configuration. Reference the resulting file via <script src="/assets/bundle.js" defer></script> in your templates.

Optimize Third-Party Script Loading

Prevent external libraries from blocking render or inflating the initial payload. Apply loading="lazy" and defer attributes to analytics and tracking scripts. Self-host critical web fonts to eliminate external DNS lookups and render-blocking requests.

Implement an Intersection Observer for heavy UI widgets. Load these assets only when they enter the viewport. Use eleventyComputed in your frontmatter to conditionally inject heavy scripts based on page type.

---
layout: default
needsChart: true
---

Wrap your {% js %} blocks in Liquid or Nunjucks conditionals to enforce strict scope boundaries.

Common Pitfalls

Global Script Injection in Layouts Adding <script> tags directly to base layout files forces every route to download identical payloads. Eleventy layouts cascade globally. Use {% js %} blocks or conditional frontmatter flags to restrict injection to required pages.

Missing Tree-Shaking Configuration Bundlers often include unused exports from npm packages, inflating final bundle size. Enable sideEffects: false in package.json and configure explicit treeShaking flags. Verify elimination of dead code using esbuild --metafile or a visualizer.

Development Mode Deployed to Production Unminified source maps and verbose error handling frequently remain active in live builds. Set ELEVENTY_ENV=production in your CI/CD pipeline. Conditionally toggle minify: true and disable sourcemaps in your configuration file.

FAQ

Does Eleventy natively support JavaScript bundling? No. Eleventy is a static site generator focused on templating and file transformation. Use @11ty/eleventy-plugin-bundle or external tools like esbuild and Rollup for compilation and minification.

How do I verify bundle size reductions? Run du -sh _site before and after optimization. Analyze output with esbuild --metafile or webpack-bundle-analyzer. Validate performance gains via Lighthouse CI in your deployment pipeline.

Can I conditionally load heavy scripts based on page type? Yes. Use eleventyComputed to set frontmatter flags such as needsChart: true. Wrap your {% js %} blocks in {% if needsChart %} conditionals to enforce strict, route-specific loading.