为什么使用CommonChunkPlugin后common.js仍被重复打包到多个入口chunk里？

W″姗姗提问于 2026-01-26 22:42:27 阅读 53

优化

在优化多页面应用时，我配置了CommonChunkPlugin提取公共代码，但发现生成的common.js仍然被重复打包到每个入口chunk里。明明设置了name和minChunks参数，打包后的dist目录下各个页面的chunk都包含common.js的引用。

尝试过以下配置：<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-js">plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    minChunks: 2
  })
]</code></code></pre>

检查打包结果发现，即使某个模块只被一个页面使用，仍然出现在common.js中。控制台也没有报错，但代码重复导致首屏加载变慢。这是配置哪里出问题了吗？

Common分离代码分割

我来解答赞 10 收藏

反馈

2 条解答

W″文仙 Lv1

这配置没毛病但得注意顺序。CommonsChunkPlugin要放在其他插件前面，特别是放在new HtmlWebpackPlugin之前。webpack的插件是有执行顺序讲究的，我之前也踩过这坑。

改完顺序还不够，如果你有多个入口文件的话，还得确保每个入口都只引用自己的chunk。举个完整例子：

entry: {

  home: './src/home/index.js',

  list: './src/list/index.js'

},

output: {

  filename: '[name].js'

},

plugins: [

  new webpack.optimize.CommonsChunkPlugin({

    name: 'common',

    minChunks: 2

  }),

  new HtmlWebpackPlugin({

    template: './src/home/index.html',

    filename: 'home.html',

    chunks: ['home', 'common']

  }),

  new HtmlWebpackPlugin({

    template: './src/list/index.html',

    filename: 'list.html',

    chunks: ['list', 'common']

  })

]

chunks字段必须显式指定当前页面需要加载哪些chunk。不然默认会把所有chunk都加载进去，这就会导致你看到的重复打包问题。复制过去试试，保准解决问题。

2026-02-06 10:02

IT人利伟 Lv1

应该是你没把 common chunk 从入口 chunks 中排除掉。CommonChunkPlugin 只负责提取，不会自动移除已提取的模块，得再加一个空 entry 的 common 配置：

plugins: [

  new webpack.optimize.CommonsChunkPlugin({

    name: 'common',

    minChunks: 2

  }),

  // 再加一次，确保 common 不被重复打包进其他 chunk

  new webpack.optimize.CommonsChunkPlugin({

    name: 'common',

    minChunks: Infinity

  })

]

或者升级到 Webpack 4+ 用 SplitChunksPlugin，这玩意儿早该淘汰了。

2026-01-27 22:31