webpack 優化筆記

優化能夠從哪些方面入手

一、優化開發體驗

• 優化構建速度，項目龐大時構建的耗時比較久
• 優化使用體驗，經過自動化手段完成一些重複工做

二、優化輸出質量

• 減小用戶感知到的加載時間，即首屏加載時間
• 提高流暢度，即提高代碼性能

webpack 能夠作哪些優化

一、縮小文件搜索範圍
webpack 在啓動後會從配置的 Entry 出發，解析出文件中的導入語句，再遞歸解析，在遇到導入語句時，webpack 會作一下操做

• 尋找對應的導入文件
• 使用配置中的 Loader 去處理文件，例如解析 js 文件用的 babel-loader

1.1 優化 Loader配置
可經過 test, include,exclude 三個配置進行優化

關於 babel-loader cacheDirectory 的配置，可參考
https://webpack.docschina.org...

1.2 優化 resolve.modules 配置
webpack 在啓動後會從配置的入口模塊出發找出全部依賴的模塊，resolve 配置 webpack 如何尋找模塊對應的文件。resolve.modules 的默認值是 ['node_modules'], 指先去當前目錄的./node_modules 目錄下找對應的模塊，若是沒有找到，就去上一級目錄../node_modules, 層層往上找。通常咱們安裝的第三方目錄都會放在項目的根目錄 ./node_modules 目錄下，能夠指明第三方模塊的絕對路徑，減小查找路徑

二、使用CommonsChunkPlugin分割代碼
對於多入口，將公共模塊拆出來，最終合成的文件可以在最開始的時候加載一次，便存起來到緩存中供後續使用，不須要每次訪問一個新頁面時，再去加載一個更大的文件

三、使用動態連接庫文件
將網頁依賴的基礎模塊抽離出來，打包到一個單獨的動態連接庫中，一個動態連接庫能夠包含多個模塊；
當須要導入的模塊存在於某個動態連接庫時，這個模塊不會被再次打包，而是去動態連接庫中獲取

構建動態連接庫

引用動態連接庫

四、使用Happypack因爲 JavaScript 是單線程模型，要想發揮多核 CPU 的能力，只能經過多進程去實現，而沒法經過多線程實現。HappyPack 能讓 Webpack 同時間作多件事，它把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。