JavaScript Bundle Size 優化: From Analysis to Action

Tue, 22 Oct 2024 00:00:00 +0900

JavaScript bundle size directly impacts user experience. Larger bundles mean longer download times, slower parsing and compilation, and worse Core Web Vitals. A 100KB increase in JavaScript reduces conversion rates by 2 to 3 percent. Bundle optimization is an ongoing investment, not a one-time fix, and follows a cycle of analysis, identification, optimization, and monitoring.

Bundle Analysis Tools

Understanding what is in your bundle is the first step. webpack-bundle-analyzer provides an interactive treemap visualization that highlights large dependencies and duplicate modules. Vite users can leverage rollup-plugin-visualizer with sunburst and network graphs, while esbuild offers the –metafile flag for detailed output analysis. source-map-explorer maps compiled code back to source files.

# Generate a bundle analysis report with webpack
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json

When interpreting analysis output, look for oversized dependencies, duplicate modules across chunks, unexpected bundled polyfills, and outdated library versions that include unnecessary code. A typical optimization walkthrough can reduce a 1.2MB bundle to under 480KB by addressing these findings.

Tree Shaking Deep Dive

Tree shaking uses static analysis of ES module import and export statements to eliminate unused exports. Effective tree shaking requires three conditions: ESM syntax only, as CommonJS require calls cannot be statically analyzed; side-effect-free packages declared with "sideEffects": false in package.json; and proper import styles that avoid namespace imports.

{
 "sideEffects": false,
 "exports": {
 ".": "./src/index.js",
 "./utils": "./src/utils/index.js"
 }
}

Common misconceptions include the belief that import * as prevents tree shaking, that barrel files are safe, and that CSS imports never interfere. In practice, lodash-es treeshakes far better than lodash, and date-fns at 16KB gzipped is dramatically smaller than moment.js at 231KB.

Code Splitting Strategies

Code splitting operates at multiple levels. Entry-point splitting separates 攤商, application, and runtime code into distinct bundles. Dynamic splitting uses route-based splitting for SPAs with React.lazy and Suspense, component-level splitting for heavy UI elements such as rich text editors and charts, and library-level splitting triggered on user interaction.

const Dashboard = React.lazy(() => import('./routes/Dashboard'));
const Analytics = React.lazy(() => import('./routes/Analytics'));

Preload and prefetch hints further optimize loading. Use link rel preload for critical chunks and link rel prefetch for predicted navigation. A real-world case study shows that splitting a dashboard application into eight route chunks reduced the initial bundle by 65 percent while maintaining instant navigation to secondary routes.

Dynamic Import Patterns

Beyond basic route splitting, conditional imports load polyfills only when needed, for example importing core-js features only when the browser lacks native 支援. Environment-specific imports load debugging tools only in development. Feature-flag-based imports enable A/B testing without deploying multiple application versions.

if (!('group' in Array.prototype)) {
 await import('core-js/actual/array/group');
}

Webpack magic comments provide fine-grained control over chunk naming, prefetch behavior, and loading mode. The webpackExports magic comment enables targeted tree shaking within dynamic imports, ensuring that only the specific exports used are included in the resulting chunk.

Dead Code Elimination and Dependency Profiling

Tools like ts-prune and unimported identify exports that are imported but never called. Dependency profilers such as cost-of-modules and package-size quantify the bundle impact of each library, encouraging developers to evaluate libraries by their weight, not just their API quality.

Library	Gzipped Size	Alternative	Gzipped Size
moment.js	231KB	dayjs	6KB
lodash	71KB	lodash-es	24KB
redux	12KB	zustand	3KB

Strategies for reducing dependency count include preferring lighter alternatives, self-hosting small utility functions instead of pulling in a library, and using CDN with subresource integrity for rarely changed large libraries.

Modern Format Output

ESM is the modern module format offering better tree shaking, static analysis, and browser-native module loading. Dual ESM and CJS packages use the exports field in package.json for conditional exports. For application bundling, output ESM for modern browsers and 秋季 back to legacy bundles using the type module and nomodule pattern. Vite defaults to ESM-first output, while webpack maintains a CJS compatibility layer for broader 支援.

Monitoring and Budget Enforcement

Optimization without monitoring is unsustainable. Lighthouse CI detects bundle size regressions, and GitHub Actions with size-limit or bundlesize enforce budgets in pull requests.

{
 "scripts": {
 "size": "size-limit"
 },
 "size-limit": [
 {
 "path": "dist/main.js",
 "limit": "170 KB",
 "running": false
 }
 ]
}

Real-user monitoring tracks script evaluation time and long tasks through the PerformanceObserver API. Setting per-route budgets and monitoring the 95th percentile of JavaScript execution time provides ongoing visibility into bundle health.

Advanced Techniques

Manual chunk splitting with webpack splitChunks cacheGroups or Vite manualChunks gives fine-grained control over output structure. CSS-in-JS extraction eliminates runtime overhead from styled-components or Emotion. Polyfill strategies using core-js with useBuiltIns usage minimize the compatibility payload. WebAssembly modules require separate size profiling, as standard bundle analyzers do not capture Wasm blob sizes.

結論

Bundle optimization is an iterative process that must be measured continuously. Set up analysis tools, identify the biggest contributors to bundle size, apply targeted optimizations, and automate monitoring in CI/CD. Teams that treat bundle size as a first-class concern ship faster experiences, better Core Web Vitals scores, and higher conversion rates as a result.

Bundler on Commentary of Takao