CommonsChunkPlugin react区块文件过大

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']
        })
    ]
};

some of my component chunk size are almost 1M!!!

Answer 1

一个原因可能是一些lib在所有生成的块上重复，以避免您可以使用：

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

这样，您就是在告诉webpack创建另一个具有重复lib的块。