淺談webpack優化
阿新 • • 發佈：2018-04-06
web 如果 區分 針對 過程 工作 就是 需要 pos
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；
淺談webpack優化