JS Code Splitting: Advanced Performance Guide

// WITHOUT code splitting: one massive bundle
// main.js -> 2.4MB (everything loaded upfront)
 
// WITH code splitting: small initial bundle + on-demand chunks
// main.js    -> 120KB (critical path only)
// chart.js   -> 340KB (loaded when user opens dashboard)
// editor.js  -> 520KB (loaded when user opens editor)
// admin.js   -> 280KB (loaded only for admin users)

// Static import: always included in bundle
import { heavyChart } from "./chart-library";
 
// Dynamic import: loaded on demand, returns a Promise
async function showChart(data) {
  const { heavyChart } = await import("./chart-library");
  heavyChart.render(data);
}
 
// With loading state
async function loadFeature(featureName) {
  const statusEl = document.getElementById("status");
  statusEl.textContent = "Loading...";
 
  try {
    const module = await import(`./features/${featureName}.js`);
    module.init();
    statusEl.textContent = "";
  } catch (error) {
    statusEl.textContent = "Failed to load feature";
    console.error("Dynamic import failed:", error);
  }
}
 
// Named exports vs default export
async function loadUtils() {
  // Named exports
  const { debounce, throttle } = await import("./utils");
 
  // Default export
  const module = await import("./validator");
  const Validator = module.default;
 
  return { debounce, throttle, Validator };
}

// webpack.config.js
module.exports = {
  entry: {
    main: "./src/index.js",
    admin: "./src/admin.js",
  },
 
  optimization: {
    splitChunks: {
      chunks: "all",
      maxInitialRequests: 25,
      maxAsyncRequests: 25,
      minSize: 20000,
 
      cacheGroups: {
        // Vendor splitting: separate node_modules
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
            )[1];
            return `vendor.${packageName.replace("@", "")}`;
          },
          priority: 10,
        },
 
        // Framework chunk: React, ReactDOM
        framework: {
          test: /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/,
          name: "framework",
          priority: 20,
          chunks: "all",
        },
 
        // Shared utilities across entry points
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
          name: "common",
        },
      },
    },
  },
};

// Webpack magic comments for prefetch/preload
 
// Prefetch: load during browser idle time (for future navigation)
function setupDashboard() {
  const dashBtn = document.getElementById("open-dashboard");
  dashBtn.addEventListener("click", async () => {
    const { Dashboard } = await import(
      /* webpackPrefetch: true */
      "./dashboard/Dashboard"
    );
    new Dashboard().mount("#content");
  });
}
 
// Preload: load immediately in parallel (needed soon)
async function renderPage() {
  const { Header } = await import(
    /* webpackPreload: true */
    "./components/Header"
  );
  Header.render();
}
 
// Programmatic prefetch based on user behavior
class SmartPrefetcher {
  constructor() {
    this.prefetched = new Set();
    this.observer = null;
  }
 
  prefetchOnHover(selector, chunkLoader) {
    document.querySelectorAll(selector).forEach((el) => {
      el.addEventListener(
        "mouseenter",
        () => {
          const key = el.dataset.chunk;
          if (!this.prefetched.has(key)) {
            this.prefetched.add(key);
            chunkLoader(key);
          }
        },
        { once: true }
      );
    });
  }
 
  prefetchOnVisible(selector, chunkLoader) {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const key = entry.target.dataset.chunk;
          if (!this.prefetched.has(key)) {
            this.prefetched.add(key);
            chunkLoader(key);
            this.observer.unobserve(entry.target);
          }
        }
      });
    });
 
    document.querySelectorAll(selector).forEach((el) => {
      this.observer.observe(el);
    });
  }
}
 
// Usage
const prefetcher = new SmartPrefetcher();
const loaders = {
  chart: () => import("./features/chart"),
  editor: () => import("./features/editor"),
  settings: () => import("./features/settings"),
};
 
prefetcher.prefetchOnHover("[data-chunk]", (key) => loaders[key]?.());

// webpack.config.js - Host Application
const { ModuleFederationPlugin } = require("webpack").container;
 
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        dashboard: "dashboard@https://cdn.example.com/dashboard/remoteEntry.js",
        settings: "settings@https://cdn.example.com/settings/remoteEntry.js",
      },
      shared: {
        react: { singleton: true, requiredVersion: "^18.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
      },
    }),
  ],
};
 
// Loading remote modules dynamically
async function loadRemoteModule(scope, module) {
  await __webpack_init_sharing__("default");
  const container = window[scope];
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(module);
  return factory();
}
 
// Usage with error boundaries
async function loadDashboard() {
  try {
    const { DashboardWidget } = await import("dashboard/Widget");
    return DashboardWidget;
  } catch (error) {
    console.error("Remote module failed to load:", error);
    const { FallbackWidget } = await import("./fallbacks/DashboardFallback");
    return FallbackWidget;
  }
}

// Custom chunk analysis utility
class BundleAnalyzer {
  constructor() {
    this.chunks = new Map();
    this.loadTimes = new Map();
  }
 
  trackChunkLoad(chunkName, loader) {
    return async (...args) => {
      const start = performance.now();
 
      try {
        const module = await loader(...args);
        const loadTime = performance.now() - start;
 
        this.loadTimes.set(chunkName, [
          ...(this.loadTimes.get(chunkName) || []),
          loadTime,
        ]);
 
        this.chunks.set(chunkName, {
          loaded: true,
          lastLoadTime: loadTime,
          loadCount: (this.chunks.get(chunkName)?.loadCount || 0) + 1,
        });
 
        return module;
      } catch (error) {
        this.chunks.set(chunkName, {
          loaded: false,
          error: error.message,
          failCount: (this.chunks.get(chunkName)?.failCount || 0) + 1,
        });
        throw error;
      }
    };
  }
 
  getReport() {
    const report = {};
    for (const [name, times] of this.loadTimes) {
      const sorted = [...times].sort((a, b) => a - b);
      report[name] = {
        loads: times.length,
        avgMs: (times.reduce((a, b) => a + b, 0) / times.length).toFixed(2),
        medianMs: sorted[Math.floor(sorted.length / 2)].toFixed(2),
        p95Ms: sorted[Math.floor(sorted.length * 0.95)].toFixed(2),
      };
    }
    return report;
  }
}
 
const analyzer = new BundleAnalyzer();
 
// Wrap dynamic imports with tracking
const loadChart = analyzer.trackChunkLoad("chart", () =>
  import("./features/chart")
);
const loadEditor = analyzer.trackChunkLoad("editor", () =>
  import("./features/editor")
);