1. 首页
  2. 问答
  3. 的WebPack路线基于代码分裂降低我的包大小，但增加了我的块大小

的WebPack路线基于代码分裂降低我的包大小，但增加了我的块大小

2017-06-19 110 views
1

我的包大小约为2MB未压缩和400KB压缩的WebPack路线基于代码分裂降低我的包大小，但增加了我的块大小

enter image description here

enter image description here

这束用的WebPack 1.15创建。 0。

而膜条是这样enter image description here

这是Webpackanalyzer输出enter image description here

然后，我已经更新的WebPack到2.6.1并启用代码劈裂和移动所有第三方JS到供应商。 js，现在bundle.js只包含我的应用程序的代码。

我的包的大小是这样的 enter image description here

这是未压缩的大小。

但加载时间增加到7.09senter image description here

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

这里是实现基于分块enter image description here

正如你可以看到bundle.js航线后的最终结果是从1.75MB减少到180KB。

正如我从WebpackBundle Analyzer可以看到的，每个块在每个块内都有其node_modules。这个节点模块对于所有块都是相同的。

enter image description here

这是两条路线的比较。 enter image description here。

有什么办法可以减少每条路径的块大小吗？

我正在使用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' }),

来源

2017-06-19 John

回答

0

正如@ 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块中。

来源

2017-06-20 05:51:14 John

相关问题

 相关问题