Webpack Core Principles and Code Splitting: From CommonsChunkPlugin to SplitChunksPlugin

This article provides a comprehensive guide to understanding webpack's core principles and code splitting strategies. It begins with the historical context of frontend development, explaining how the introduction of Chrome's V8 engine in 2008 and Node.js in 2009 transformed JavaScript from a simple scripting language into a powerful ecosystem, marking the transition from the "stone age" to the industrial era of frontend development.

The article then explores why modularization became essential for frontend development, addressing common pain points such as global namespace pollution, sequential script loading, complex dependency management, and difficulties in maintaining large projects with multiple contributors. It covers the major module specifications including CommonJS (used by Node.js), AMD (Asynchronous Module Definition, implemented by require.js), CMD (Common Module Definition, promoted by sea.js), and ES6 modules.

Webpack is introduced as a static module bundler that creates a dependency graph from one or more entry points and combines modules into bundles. The article details webpack's core architecture, explaining key concepts like Entry, Compiler, Compilation, Module, Chunk, Loader, and Plugin. The webpack build process consists of three main phases: initialization (reading configuration, creating compiler, determining entry points), build phase (compiling modules using loaders, converting to AST, resolving dependencies), and generation phase (assembling chunks, outputting assets to filesystem).

The article deeply analyzes the Chunk concept, distinguishing between initial chunks (from entry points), async chunks (from dynamic imports), and runtime chunks (for webpack 5). It explains the resource flow: Module → AST → Dependencies → Module during compilation, and how modules are organized into chunks during the seal phase.

A significant portion is dedicated to comparing CommonsChunkPlugin (deprecated) with SplitChunksPlugin. CommonsChunkPlugin had limitations including code duplication, poor async chunk handling, and complex configuration. SplitChunksPlugin, introduced in webpack 4, uses heuristic rules based on module reference frequency, chunk size, and request count to automatically identify which chunks should be split. It offers advantages like avoiding unnecessary downloads, supporting async chunks, handling vendor chunks from multiple sources, and easier configuration.

The article provides detailed guidance on SplitChunksPlugin configuration, including chunks (all/initial/async), minChunks for module usage frequency, maxInitialRequest/maxAsyncRequests for limiting parallel requests, and size-related options (minSize, maxSize, maxAsyncSize, maxInitialSize, enforceSizeThreshold). It also explains cacheGroups for setting different rules for different file groups, with default groups for vendors (node_modules) and default (modules used 2+ times).

Best practices include separating third-party libraries into independent chunks, maintaining route-based splitting to reduce initial load, and using chunks='all' for comprehensive optimization.