reactjs - CommonsChunkPlugin 反应过大的块文件

Question

我有一个使用 webpack2 构建的 react 项目，但是构建的块文件都过大了，总大小超过了 10M！这是我的配置和日志输出的一部分。

module.exports = {
    entry: {
        app: appConf.entry
    },
    output: {
        path: appConf.buildRoot,
        publicPath: appConf.assetsPublicPath,
        filename: assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function(module, count) {
                // any required modules inside node_modules are extracted to vendor
                return (module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../../node_modules')) === 0);
            }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            chunks: ['vendor']
        })
    ]
};

我的一些组件块大小几乎是 1M ！！！

Answer 1

一个原因可能是某些库在生成的块中重复，以避免您可以使用：

new webpack.optimize.CommonsChunkPlugin({
  children: true,
  minChunks: 2
})

这样你就告诉 webpack 用重复的库创建另一个块。