1. 首頁
  2. 問答
  3. 的WebPack路線基於代碼分裂降低我的包大小，但增加了我的塊大小

的WebPack路線基於代碼分裂降低我的包大小，但增加了我的塊大小

2017-06-19 69 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

相關問題

 相關問題