關於 webpack 優化的那些事
阿新 • • 發佈:2018-12-10
優化可以從哪些方面入手
1、優化開發體驗
- 優化構建速度,專案龐大時構建的耗時比較久
- 優化使用體驗,通過自動化手段完成一些重複工作
2、優化輸出質量
- 減少使用者感知到的載入時間,即首屏載入時間
- 提升流暢度,即提升程式碼效能
webpack 可以做哪些優化
1、縮小檔案搜尋範圍webpack 在啟動後會從配置的 Entry 出發,解析出檔案中的匯入語句,再遞迴解析,在遇到匯入語句時,webpack 會做一下操作
- 尋找對應的匯入檔案
- 使用配置中的 Loader 去處理檔案,例如解析 js 檔案用的 babel-loader
1.1 優化 Loader配置可通過 test, include,exclude 三個配置進行優化
1.2 優化 resolve.modules 配置webpack 在啟動後會從配置的入口模組出發找出所有依賴的模組,resolve 配置 webpack 如何尋找模組對應的檔案。resolve.modules 的預設值是 ['node_modules'], 指先去當前目錄的./node_modules 目錄下找對應的模組,如果沒有找到,就去上一級目錄../node_modules, 層層往上找。一般我們安裝的第三方目錄都會放在專案的根目錄 ./node_modules 目錄下,可以指明第三方模組的絕對路徑,減少查詢路徑