Code Splitting

The primary mechanism for implementing code splitting in modern JavaScript. The import() syntax returns a promise that resolves to a module, allowing developers to load dependencies on demand rather than at the initial parse time.

• Syntax: const module = await import('./heavy-module.js');
• Behavior: Creates a new chunk that is fetched only when the code path is executed
• Framework Integration: React uses React.lazy(), Vue uses defineAsyncComponent
• Network Impact: Reduces the initial download size by deferring non-critical resources

A design pattern that defers the initialization of a resource until the point at which it is needed. While code splitting breaks the bundle into chunks, lazy loading controls when those chunks are fetched—typically when a component enters the viewport or a route is activated. This reduces the initial JavaScript parse and execution cost, directly improving Time to Interactive (TTI) and First Input Delay (FID).

• Route-based: Loads chunks when a user navigates to a specific route
• Component-based: Loads below-the-fold components on scroll or intersection
• Dynamic imports are the native JavaScript mechanism: import('./module.js') returns a promise

A dead-code elimination technique performed by bundlers like Webpack, Rollup, and esbuild. Tree shaking statically analyzes import and export statements to determine which modules and functions are actually used, removing the rest from the final bundle. It relies on ES module syntax because CommonJS require() calls are dynamic and cannot be analyzed at build time.

• Requires sideEffects: false in package.json to be maximally aggressive
• Works in tandem with code splitting—shaken chunks are smaller and faster to load
• Ineffective if libraries ship only CommonJS builds or barrel exports that re-export everything

The practice of visualizing and auditing the composition of JavaScript bundles to identify bloat, duplication, and splitting opportunities. Tools generate treemap or sunburst visualizations where each rectangle represents a module, sized proportionally to its contribution to the total bundle size.

• Webpack Bundle Analyzer: Visualizes webpack output with interactive zoom
• Source Map Explorer: Maps minified code back to original source sizes
• Bundle Buddy: Identifies duplicate code across chunks
• Key metrics: parse size vs. gzipped size, largest dependencies, chunk overlap percentage

A JavaScript language feature (import()) that returns a promise for a module namespace object, enabling on-demand loading. Unlike static import declarations that are hoisted and evaluated at module parse time, dynamic imports are evaluated at runtime, making them the fundamental building block of code splitting.

• Returns Promise<ModuleNamespaceObject>
• Supports await import('./module.js') in async functions
• Enables conditional loading: import different modules based on feature flags, A/B tests, or device capabilities
• Bundlers automatically create separate chunks for dynamically imported modules

A cache-busting strategy where each output chunk filename includes a content-derived hash (e.g., vendor.a3f8b2c.js). When the chunk's contents change, the hash changes, forcing browsers to download the new version while allowing unchanged chunks to remain cached indefinitely.

• [contenthash]: Changes only when chunk content changes
• [chunkhash]: Changes when any module in the chunk changes
• Enables long-term caching with Cache-Control: max-age=31536000
• Critical for code splitting: shared vendor chunks can be cached across deployments

A Webpack 5 feature enabling runtime code sharing across independently deployed applications. Unlike traditional code splitting within a single build, Module Federation allows micro-frontends to share dependencies and expose components that are loaded dynamically at runtime from remote origins.

• Host: The application that consumes remote modules
• Remote: The application that exposes modules
• Shared dependencies: Libraries like React are loaded once and shared across federated apps
• Eliminates duplicate dependency downloads in micro-frontend architectures