webpack優化方案
1. 優化開發體驗
1-1. 加快構建速度
① 縮小檔案搜尋範圍
- 由於 Loader 對檔案的轉換操作很耗時，需要讓儘可能少的檔案被 Loader 處理，用include和exclude去縮小；
- resolve.modules用於配置 Webpack 去哪些目錄下尋找第三方模組：[path.resolve(__dirname, `node_modules`)]（根目錄下）；
- resolve.mainFields用於配置第三方模組使用哪個入口檔案：[`mian`]；
- resolve.alias配置項通過別名來把原匯入路徑對映成一個新的匯入路徑：[path.resolve(__dirname, `./node_modules/react/dist/react.min.js`)]；
- resolve.extensions用於配置在嘗試過程中用到的字尾列表：[`js`, `json`]；
- module.noParse配置項可以讓 Webpack 忽略對部分沒采用模組化的檔案的遞迴解析處理：[/react.min.js$/]；
② HappyPack
- HappyPack 的核心原理就是把loader轉換任務分解到多個程式去並行處理，從而減少了總的構建時間；
③ ParallelUglifyPlugin
- 壓縮js程式碼需要先把程式碼解析成用 Object 抽象表示的 AST 語法樹，再去應用各種規則分析和處理 AST；
- ParallelUglifyPlugin會開啟多個子程式，把對多個檔案的壓縮工作分配給多個子程式去完成，每個子程式其實還是通過 UglifyJS 去壓縮程式碼，但是變成了並行執行；
1-2. 提升開發效率
① 自動重新整理（webpack 模組負責監聽檔案，webpack-dev-server 模組則負責重新整理瀏覽器）
- 檔案監聽（–watch或watch: true），原理是定時的去獲取這個檔案的最後編輯時間，每次都存下最新的最後編輯時間，如果發現當前獲取的和最後一次儲存的最後編輯時間不一致，就認為該檔案發生了變化；
- 優化檔案監聽：watchOptions: {ignored: /node_modules/}；
- 自動重新整理原理是往要開發的網頁中注入代理客戶端程式碼，通過代理客戶端向DevServer 發起的 WebSocket 連線去重新整理整個頁面；
- devServer.inline是用來控制是否往 Chunk 中注入代理客戶端的，預設會注入；在你關閉了 inline 後，DevServer 會自動地提示你通過新網址
http://localhost:8080/webpack-dev-server/去訪問；
② 模組熱替換
- 模組熱替換的原理和自動重新整理原理類似，都需要往要開發的網頁中注入一個代理客戶端用於連線 DevServer 和網頁， 不同在於模組熱替換獨特的模組替換機制；
2. 優化輸出質量
2-1. 減少載入時間
① 區分環境
- process.env.NODE_ENV
② 壓縮程式碼
③ CDN加速
- 針對 HTML 檔案：不開啟快取，把 HTML 放到自己的伺服器上，而不是 CDN 服務上，同時關閉自己伺服器上的快取。自己的伺服器只提供 HTML 檔案和資料介面；
- 針對靜態的 JavaScript、CSS、圖片等檔案：開啟 CDN 和快取，上傳到 CDN 服務上去，同時給每個檔名帶上由檔案內容算出的 Hash 值；
④ tree shaking
- 讓 Tree Shaking 正常工作的前提是交給 Webpack 的js程式碼必須是採用 ES6 模組化語法的， 因為 ES6 模組化語法是靜態的（匯入匯出語句中的路徑必須是靜態的字串，而且不能放入其它程式碼塊中），這讓 Webpack 可以簡單的分析出哪些export的被import過了
⑤ 提取公共程式碼(CommonsChunkPlugin)
⑥ 按需載入
2-2. 提升流暢度
① Prepack
- 通過 Babel 把 JavaScript 原始碼解析成抽象語法樹（AST），以方便更細粒度地分析原始碼；
- Prepack 實現了一個 JavaScript 直譯器，用於執行原始碼。藉助這個直譯器 Prepack 才能掌握原始碼具體是如何執行的，並把執行過程中的結果返回到輸出中。
② Scope Hoisting
webpack構建流程
- 初始化（啟動構建，讀取併合並配置引數，載入plugin，例項化compiler）
- 編譯（entry出發，針對每個module引用loader解析，依次找到module依賴，然後遞迴）
- 輸出（對編譯後的module組合成chunk，轉換成檔案，輸出）
- 檔案變化，轉到step2；