webpack-bundle-analyzer解釋捆綁報告

Question

我想了解我能做些什麼來優化使用Webpack捆綁的Angular（4+）應用程序。我很聰明，可以按照this tutorial從我的生產版本生成有用的捆綁報告，但是，我不太明白報告顯示的是什麼。

以下是截圖：

它看起來像aws-sdk.js在至少三捆被複制，而tinymce.js東西是一對夫婦分開捆......這是否意味着我進口第三方node_modules效率低下？

此外，material.es5.js文件（角度材料設計模塊）是在幾個模塊...這是怎麼回事？確實，我將材料設計模塊導入到多個延遲加載的模塊中，但我認爲Angular是smart enough not to duplicate code？

任何意見或見解，非常感謝。

Answer 1

什麼報告顯示的是你有一個主束稱爲scripts &少數的動態生成的小束（稱爲chunks）你也有一個vendor包只包含@angular

這真的很難給一個回答這樣的事情，而沒有看到代碼，webpack配置&你想要達到什麼目的，但這裏有一些步驟可以提供幫助。

您應該創建具有所有主要依賴像tinymce，angular，aws-sdk，material.es5，等等...這是最有可能不會有太大變化，所以你可以讓瀏覽器緩存這種捆綁一個vendor包。要做到這一點，你需要添加這樣

entry: { 
     scripts: 'path/to/scripts.js', 
     vendor: [ 
      'tinymce', 
      '@angular', 
      'aws-sdk', 
      etc... 
     ], 
    }, 

一個額外的條目您還需要CommonChunksPlugin這樣

new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendor'], 
     minChunks: Infinity, 
    }), 

這可能會給你很好的開始，我認爲，在如何解決一些的問題。