淺談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構建流程

1. 初始化（啓動構建，讀取併合並配置參數，加載plugin，實例化compiler）
2. 編譯（entry出發，針對每一個module引用loader解析，依次找到module依賴，而後遞歸）
3. 輸出（對編譯後的module組合成chunk，轉換成文件，輸出）
4. 文件變化，轉到step2；