1. 程式人生 > >關於 webpack 優化的那些事

關於 webpack 優化的那些事

優化可以從哪些方面入手

1、優化開發體驗

  • 優化構建速度,專案龐大時構建的耗時比較久
  • 優化使用體驗,通過自動化手段完成一些重複工作

2、優化輸出質量

  • 減少使用者感知到的載入時間,即首屏載入時間
  • 提升流暢度,即提升程式碼效能

webpack 可以做哪些優化

1、縮小檔案搜尋範圍webpack 在啟動後會從配置的 Entry 出發,解析出檔案中的匯入語句,再遞迴解析,在遇到匯入語句時,webpack 會做一下操作

  • 尋找對應的匯入檔案
  • 使用配置中的 Loader 去處理檔案,例如解析 js 檔案用的 babel-loader

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

clipboard.png

1.2 優化 resolve.modules 配置webpack 在啟動後會從配置的入口模組出發找出所有依賴的模組,resolve 配置 webpack 如何尋找模組對應的檔案。resolve.modules 的預設值是 ['node_modules'], 指先去當前目錄的./node_modules 目錄下找對應的模組,如果沒有找到,就去上一級目錄../node_modules, 層層往上找。一般我們安裝的第三方目錄都會放在專案的根目錄 ./node_modules 目錄下,可以指明第三方模組的絕對路徑,減少查詢路徑

clipboard.png