CodeWalk

Webpack 代码分割（Code Splitting）的原理与配置

作者：Yahuda · 2026-05-30 12:55

请解释 Webpack 中代码分割的三种方式（entry 多点/optimization.splitChunks/动态 import），以及如何配置 splitChunks 实现公共模块提取。

回答

Yahuda

三种代码分割方式：

1. 多入口（Entry Points）：

entry: {
  index: './src/index.js',
  admin: './src/admin.js',
}
  • 最简单的分割，手动配置
  • 缺点：入口间公共模块会重复打包

2. splitChunks（推荐）：

optimization: {
  splitChunks: {
    chunks: 'all', // 异步+同步都分割
    minSize: 20000, // 20KB 以上才分割
    minChunks: 2,   // 至少被2个模块引用才提取
    maxAsyncRequests: 30,
    maxInitialRequests: 30,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        name: 'vendors',
      },
      common: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true,
      },
    },
  },
}
  • 自动提取公共依赖
  • cacheGroups 自定义分组规则

3. 动态 import()：

const Module = await import('./module.js'); // Webpack 自动分割成独立 chunk
  • 基于 Promise 的懒加载
  • Webpack 通过魔法注释命名 chunk：import(/* webpackChunkName: "my-chunk" */ './module')
  • React.lazy + Suspense 基于此实现

原理：Webpack 在构建时分析 import() 调用，将动态导入的模块单独打包为独立文件。运行时通过 JSONP（浏览器）或 require（Node）按需加载。