基于webpack路由的代码分割减少了我的包大小，但增加了我的块大小

Question

我的捆绑包大小约为2MB未压缩和400kb压缩

此捆绑包是使用webpack 1.15.0 创建的。

电影胶片就像这样

这是Webpackanalyzer输出

然后我将webpack更新为 2.6.1 并启用了代码拆分并将所有第三方j移动到vendor.js，现在bundle.js只包含我的应用程序代码。

我的捆绑尺寸是这样的

这是未压缩的大小。

但是加载时间增加到 7.09s

然后我们尝试chunking based on routes。使用 require.ensure 。我们认为1.75mb的捆绑将根据路线分成小块。但每条路线的大块都比预期的要大得多。并且总路由块的总和大于bundle.js size

以下是启用基于路由的分块后的最终结果

正如您所见，bundle.js从1.75MB减少到 180kb 。

正如我从WebpackBundle Analyzer中看到的，每个块在每个块中都有node_modules。所有块的节点模块都相同。

这是两条路线的比较。。

有没有办法减少每条路线的块大小？

我正在使用CommonChunkPlugin。

new CommonsChunkPlugin({
            name: 'common',
            filename: 'commons-[hash:8].js',
             chunks: ['vendor'],
             minChunks: Infinity
        }),
new webpack.optimize.CommonsChunkPlugin({ name: 'meta', chunks: ['vendor'], filename: 'meta.[hash].js' }),

Answer 1

看起来你需要的是CommonsChunkPlugin https://webpack.js.org/plugins/commons-chunk-plugin/#components/sidebar/sidebar.jsx

Answer 2

正如@ user1471177所述。我又添加了一个CommonChunkPlugin，它将所有路由块的公共代码放入一个公共块中。

new CommonsChunkPlugin({
        name: 'common',
        filename: 'commons-[hash:8].js',
         chunks: ['vendor'],
         minChunks: Infinity
    }),
new webpack.optimize.CommonsChunkPlugin({ name: 'meta', chunks: ['vendor'], filename: 'meta.[hash].js' }),
new webpack.optimize.CommonsChunkPlugin({ name: 'common', chunks: ['0','1','2',.......'30'], filename: 'common.[hash].js' , minChunks: 2}),

将所有常用代码分隔到一个common.js块中。