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

Question

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

此包是使用 webpack 1.15.0 创建的。

而胶片是这样的

这是 Webpackanalyzer 输出

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

我的包大小是这样的

这是未压缩的大小。

但是加载时间增加到7.09s

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

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

如您所见，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 块。

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

webpack route based code splitting reduced my bundle size but increased my chunk size

reactjs

webpack

code-splitting

code-splitting-async