使用webpack 優化自己的項目。

一、首先要了解概念：​

​module​

​​，​

​chunk​

​​ 和 ​

​bundle 到底是什麼？

​

​

​module​

​​，​

​chunk​

​​ 和 ​

​bundle​

​ 其實就是同一份邏輯代碼在不同轉換場景下的取了三個名字：

我們直接寫出來的是 module，webpack 處理時是 chunk，最後生成浏覽器可以直接運作的 bundle。 ​​參考連結​​

​

​二、除了常見的項目優化（開啟gzip壓縮、external引入線上cdn減少打包體積...）還有什麼？​

​

1、優化拆包政策。預設webpack分包政策是：

• 新的 chunk 是否被共享或者是來自 node_modules 的子產品
• 新的 chunk 體積在壓縮之前是否大于 30kb
• 按需加載 chunk 的并發請求數量小于等于 5 個
• 頁面初始加載時的并發請求數量小于等于 3 個

以上這些情況 都會單獨打包成了一個個獨立 bundle。 這就造成一些不合理的現象。例如：一個背景管理頁面，它大部分的頁面都是表單和 Table，我使用了一個第三方 table 元件，幾乎背景每個頁面都需要它，但它的體積也就 15kb，不具備單獨拆包的标準，它就這樣被打包到每個頁面的 bundle 中了，這就很浪費資源了。這種情況下建議把大部分頁面能共用的元件單獨抽出來，政策是按照體積大小、共用率、更新頻率重新劃分我們的包，使其盡可能的利用浏覽器緩存

2、持久化緩存

• 針對 html 檔案：不開啟緩存，把 html 放到自己的伺服器上，關閉伺服器的緩存
• 針對靜态的 js，css，圖檔等檔案：開啟 cdn 和緩存，将靜态資源上傳到 cdn 服務商，我們可以對資源開啟長期緩存，因為每個資源的路徑都是獨一無二的，是以不會導緻資源被覆寫，保證線上使用者通路的穩定性。
• 每次釋出更新的時候，先将靜态資源(js, css, img) 傳到 cdn 服務上，然後再上傳 html 檔案，這樣既保證了老使用者能否正常通路，又能讓新使用者看到新的頁面。

總結

拆包政策：

• 基礎類庫​

  ​chunk-libs​

  ​
• UI 元件庫​

  ​chunk-elementUI​

  ​
• 自定義共用元件/函數​

  ​chunk-commons​

  ​
• 低頻元件​

  ​chunk-eachrts​

  ​​/​

  ​chunk-xlsx​

  ​等
• 業務代碼 lazy-loading​

  ​xxxx.js​

  ​

持久化緩存：

• 使用​

  ​runtimeChunk​

  ​​ 提取​

  ​manifest​

  ​​，使用​

  ​script-ext-html-webpack-plugin​

  ​​等插件内聯到​

  ​index.html​

  ​減少請求
• 使用​

  ​HashedModuleIdsPlugin​

  ​​ 固定​

  ​moduleId​

  ​
• 使用​

  ​NamedChunkPlugin​

  ​​結合自定義 nameResolver 來固定​

  ​chunkId​

  ​

使用​

​babel​

​​ 的 ​

​plugins​

​​ ​​babel-plugin-dynamic-import-node​​​。它隻做一件事就是将所有的​

​import()​

​​轉化為​

​require()​

​​，這樣就可以用這個插件将所有異步元件都用同步的方式引入，并結合 ​​BABEL_ENV​​​ 這個​

​babel​

​​環境變量，讓它隻作用于開發環境下，在開發環境中将所有​

​import()​

​​轉化為​

​require()​

​​，這種方案解決了之前重複打包的問題，同時對代碼的侵入性也很小，你平時寫路由的時候隻需要按照官方​​文檔​​​路由懶加載的方式就可以了，其它的都交給​

​babel​

​​來處理，當你不想用這個方案的時候，也隻要将它從​

​babel​

​​ 的 ​

​plugins​

​​中移除就可以了。​​連結​​​

​​參考連結​​