0、寫在前面

Webpack優化可以分為優化開發體驗和優化輸出質量兩部分

1、優化開發體驗

優化開發體驗的目的是為了提升開發時的效率，其中又可以分為以下幾點：

1. 優化構建速度。在項目龐大時構建耗時可能會變的很長，每次等待構建的耗時加起來也會是個大數目。

   • 4-1 縮小文件搜索范圍

     • 4-1-1 在配置 Loader 時通過 include 去縮小命中范圍
       

     • 4-1-2 優化 resolve.modules 配置，指明存放第三方模塊的絕對路徑，以減少尋找，配置如下：
       

     • 4-1-3 優化 resolve.mainFields 配置

     • 4-1-4 優化 resolve.alias 配置

     • 4-1-5 優化 resolve.extensions 配置
       在配置 resolve.extensions 時你需要遵守以下幾點，以做到盡可能的優化構建性能：

       • 后綴嘗試列表要盡可能的小，不要把項目中不可能存在的情況寫到后綴嘗試列表中。
       • 頻率出現最高的文件后綴要優先放在最前面，以做到盡快的退出尋找過程。
       • 在源碼中寫導入語句時，要盡可能的帶上后綴，從而可以避免尋找過程。例如在你確定的情況下把 require('./data') 寫成 require('./data.json')。
         

     • 4-1-6 優化 module.noParse 配置

   • 4-2 使用 DllPlugin
     為什么給 Web 項目構建接入 動態鏈接庫 的思想后，會大大提升構建速度呢？ 原因在于包含大量復用模塊的動態鏈接庫只需要編譯一次，在之后的構建過程中被動態鏈接庫包含的模塊將不會在重新編譯，而是直接使用動態鏈接庫中的代碼。 由于動態鏈接庫中大多數包含的是常用的第三方模塊，例如 react、react-dom，只要不升級這些模塊的版本，動態鏈接庫就不用重新編譯。

   • 4-3 使用 HappyPack
     在整個 Webpack 構建流程中，最耗時的流程可能就是 Loader 對文件的轉換操作了，因為要轉換的文件數據巨多，而且這些轉換操作都只能一個個挨著處理。（運行在 Node.js 之上的 Webpack 是單線程模型的）
     HappyPack的核心原理就是把這部分任務分解到多個進程去并行處理，從而減少了總的構建時間。

   • 4-4 使用 ParallelUglifyPlugin
     ParallelUglifyPlugin 會開啟多個子進程，把對多個文件的壓縮工作分配給多個子進程去完成，每個子進程其實還是通過 UglifyJS去壓縮代碼，但是變成了并行執行。 所以 ParallelUglifyPlugin 能更快的完成對多個文件的壓縮工作。

2. 優化使用體驗。通過自動化手段完成一些重復的工作，讓我們專注于解決問題本身。

   • 4-5 使用自動刷新
     使用 webpack 模塊負責監聽文件，webpack-dev-server 模塊則負責刷新瀏覽器。
   • 4-6 開啟模塊熱替換

2、優化輸出質量

優化輸出質量的目的是為了給用戶呈現體驗更好的網頁，例如減少首屏加載時間、提升性能流暢度等。 這至關重要，因為在互聯網行業競爭日益激烈的今天，這可能關系到你的產品的生死。

優化輸出質量本質是優化構建輸出的要發布到線上的代碼，分為以下幾點：

1. 減少用戶能感知到的加載時間，也就是首屏加載時間。

   • 4-7 區分環境
   • 4-8 壓縮代碼
   • 4-9 CDN 加速
   • 4-10 使用 Tree Shaking
     Tree Shaking 可以用來剔除 JavaScript 中用不上的死代碼（沒用到的代碼）。它依賴靜態的 ES6 模塊化語法，例如通過 import 和 export 導入導出。
   • 4-11 提取公共代碼
   • 4-12 按需加載

2. 提升流暢度，也就是提升代碼性能。

   • 4-13 使用 Prepack
   • 4-14 開啟 Scope Hoisting

參考文章：
深入淺出 Webpack - 優化