Engineering Reference · Webpack 5 & Vite 5+
JavaScript Bundle Analysis
& Code Splitting Architectures
A production-grade reference for frontend engineers who care about performance. Deep-dive into route-based code splitting, advanced tree-shaking, and build pipeline internals — with quantified metrics and real configuration for both Webpack 5 and Vite 5+.
Modern frontend architectures demand rigorous payload control. Proper code splitting reduces initial JavaScript by 40–65%, improving Time to Interactive by 800–1200ms on mid-tier mobile devices. Eighty-five guides cover the configuration, debugging, field measurement and CI validation workflows that make the difference in production — from the first dynamic import to module federation across independently deployed apps.
What Proper Optimisation Delivers
Explore the Reference
Four interconnected topic areas, 85 pages in total — section overviews, focused guides, and troubleshooting pages for the failure modes each technique introduces.
Dynamic imports, route-level chunk boundaries, prefetch/preload strategies, and vendor chunk isolation — with Webpack 5 and Vite 5+ configurations.
- →Dynamic Import Patterns for On-Demand Loading
- →Preventing Waterfall Requests with Dynamic Import Maps
- →Implementing Route-Level Code Splitting in SPAs
- →React.lazy with Route Transitions
- →Prefetch & Preload for Critical Routes
- →Route-Based Prefetching in Next.js
- →Vendor Chunk Isolation & Third-Party Management
- →Configuring Vite manualChunks for Vendor Isolation
- →Code Splitting for SSR & React Server Components
- →Component-Level Code Splitting Beyond Routes
- →Code Splitting Chart Libraries in Dashboards
- →Handling Lazy Chunk Load Failures & Fallbacks
- →Prefetching on Hover & Viewport Intersection
sideEffects configuration, barrel file elimination, CJS→ESM conversion, and dead-code removal pipelines for production bundles.
- →Configuring sideEffects for Optimal Tree-Shaking
- →Auditing sideEffects in Large npm Packages
- →Converting CJS Libraries to ESM for Better Bundling
- →Fixing Tree-Shaking Failures with Webpack 5
- →Eliminating Dead Code with Modern Build Tools
- →Refactoring Barrel Files to Reduce Bundle Bloat
- →Replacing Barrel Exports with Direct Module Imports
- →Optimizing lodash & Utility Library Imports
- →Shrinking Polyfill & Transpilation Overhead
- →Auditing & Replacing Heavy Dependencies
- →Replacing Moment.js with date-fns or Temporal
- →Fixing Circular Imports Introduced by Barrel Files
Webpack & Vite internals, module resolution algorithms, source map workflows, ES Modules vs CommonJS interop, and dev-server optimisation.
- →Vite Module Graph & Dependency Resolution
- →Optimizing Dev Server Startup for Large Monorepos
- →Webpack Chunk Generation Lifecycle Explained
- →Fixing Source Map Mismatches in Webpack 5
- →Source Map Generation & Debugging Workflows
- →ES Modules vs CommonJS in Bundlers
- →Configuring Module Resolution Aliases in Vite
- →Webpack 5 vs Vite 5 splitChunks — When to Choose Which
- →Deterministic Chunk Hashing for Long-Term Caching
- →Module Federation & Cross-Application Chunk Sharing
- →Fixing Shared Dependency Version Conflicts
- →Uploading Source Maps Without Shipping Them
Analyzer treemaps, source-map byte attribution, duplicate-module detection, and CI performance budgets that block size regressions on every PR.
- →Visualizing Bundle Composition with Analyzers
- →Reading webpack-bundle-analyzer Treemaps
- →Enforcing Performance Budgets in CI
- →Configuring size-limit as a GitHub Action
- →Attributing Bundle Bloat with Source Maps
- →Finding Duplicate Dependencies in a Bundle
- →Measuring Real-User Chunk Loading Performance
- →Attributing LCP Regressions to a Specific Chunk
- →Measuring INP Impact of Lazy Hydration
Start Here
New to the reference? These articles cover the highest-impact techniques first.