webpack優化方案 1. 優化開發體驗 1-1. 加快構建速度 ① 縮小文件搜索範圍 由於 Loader 對文件的轉換操作很耗時,需要讓儘可能少的文件被 Loader 處理,用include和exclude去縮小; resolve.modules用於配置 Webpack 去哪些目錄下尋找第三方模 ...
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;