Webpack學習篇
《深入淺出Webpack》優化篇 01
Webpack 優化可以分為開發優化和輸出品質優化兩部分，主要要點如下：
- 優化開發體驗，提升開發效率
- 優化構建速度
- 優化使用體驗
- 優化輸出品質
- 減少首屏載入時間
- 提升流暢度
本文主要記錄 優化構建速度這一部分的內容，本文主要內容如下：
- 縮小文件的搜索範圍
- 優化Loader的配置
- 優化resolve.modules的配置
- 優化resolve.mainFields配置
- 優化resolve.alias配置
- 優化resolve.extensions配置
- 優化module.noParse配置
縮小文件的搜索範圍
為什麼縮小文件搜索範圍可以進行優化?
因為webpack會從entry出發，解析文件導入語句，遞歸進行解析。遇到導入語句時候，webpack會做以下兩件事：
- 根據導入語句尋找導入文件
- 根據找到的導入文件的後綴，使用配置的Loader去處理文件。比如我們在兼容低版本瀏覽器的時候會採用babel-loader將程式碼編譯成ES6之前的程式碼
在實際開發中，這樣的問題無法避免，但是仍需要減少這兩件事的發生，以提高速度
優化Loader配置
因為Loader處理文件的轉換操作很耗時，所以需要儘可能的減少文件的轉換。
可以通過 test、include、exclude 三個配置來命中要轉換的文件。為了儘可能少的讓文件被Loader處理，我們可以通過include來選中哪些文件需要處理.
舉例：
優化resolve.modules配置
resolve.modules的作用是去哪些根目錄下尋找第三方模組，默認值是[‘node_modules’].含義是先去當前的./node_modules目錄下去找，如果沒找到就往上一級目錄，../node_modules,如果還沒找到就再往上 ../../node_modules中找，依次類推，大多數情況下，我們的node_modules都是在項目根目錄下的，就沒有必要再去一級一級查找了，可以直接指明絕對路徑，以減少尋找花費的時間。舉例：
優化resolve.mainFields配置
安裝的第三方包都會有一個package.json文件，某些欄位會體現出第三方模組的使用入口在哪裡，resolve.mainFields用於配置採用哪個欄位作為入口文件的描述，我們可以從axios的package.json中看到如下資訊：
然後翻閱axios的源文件，可以看到default.js的如下程式碼：
可見，axios是同時支援node和瀏覽器環境的，再來看mainFields欄位，他的默認值跟target配置有關係，當target為web或者webworker時，值是[
‘browser’,’module’,’main’
],當target為其他情況則是[‘module’,’main’],為了減少搜索步驟，在明確所有第三方模組的入口文件描述欄位的時候，我們可以將其儘可能的設置少。但是使用此配置優化時候，需要考慮到所有運行時的依賴的第三方模組的入口文件描述欄位，只要搞錯一個，程式碼就會無法運行
優化resolve.alias配置
該配置是用來優化第三方模組的引入路徑的，打個比方，react庫在安裝的時候會包含兩套程式碼，一套是採用commonJS規範的模組化程式碼，一套是將React所有相關程式碼都打包到一個react.js文件中，默認情況下，webpack會從react的入口文件遞歸解析和處理依賴的幾十個文件，工作量非常大。通過配置resolve.alias可以讓webpack處理react庫的同時，直接使用完整的react.min.js文件，從而跳過耗時的遞歸解析操作。舉例如下：
不過，這樣我們的程式碼可能會包含很多我們壓根不會用上的程式碼，當我們使用的包很大，但是我們用到的東西確很少時候，還是要慎重選擇此優化方式。
優化resolve.extensions配置
我們在使用腳手架的時候肯定會發現，即使我們不用加文件擴展名，導入也生效。默認情況下，webpack會嘗試給沒有文件擴展名的文件添加擴展名，然後再去查找文件是否存在。extensions的默認值是[‘.js’,’.json’],如果這個列表越來越長，或者正確的後綴越往後，就會造成嘗試的次數越多，所以遵守以下幾點，可以優化構建性能：
- 後綴列表儘可能的小，不要將不可能的情況寫到列表中
- 頻繁出現的放在最前面
- 在源碼中儘可能帶上後綴名
優化module.noParse配置
noParse配置可以讓webpack忽略對部分沒有採用模組化的文件的遞歸解析，比如jQuery這樣的庫，很大並且沒有模組化，解析是一件無意義的事情，配置如下：
好了，以上就是今天的全部內容.
2021-12-12 00:16:14 星期日
