CommonsChunkPlugin会对块文件进行大小调整

Question

我有一个使用webpack2的反应项目构建，但是构建的块文件都是大小的，总大小超过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创建另一个带有重复libs的块。