webpack效能優化,自定義配置

2021-10-05 08:07:16 字數 1203 閱讀 8957

以下是自己的總結:

1,使用靜態資源路徑

在publicpath中寫上自己的cdn的路徑,設定之後會在所有的資源前加上這個路徑字首,這樣在頁面在請求資源的時候,就會去cdn上查詢請求資源

2,縮小檔案搜尋範圍

在loader的rules中設定include,設定之後,就只在設定的路徑中區搜尋,exclude也可以設定,但是是排除在外,不搜尋的路徑,一般推薦使用include

3,resolve.extensions

在webpack中,一般只認識 .js .json副檔名的檔案,如果在extension中新增的別的副檔名,如下:

設定之後,在檔案引入的時候就不用寫字尾名,webpack會自動補全,但是這樣會消耗效能,所以一般不推薦新增其他的字尾名

4,alias(別名)

設定別名之後,webpack在查詢引入檔案的時候就不用一層一層去查詢,會直接在別名對應的路徑中查詢,減少查詢時間

5,抽離css檔案壓縮

6,壓縮html

注意:

1,js搖樹只支援 import 方法引入的,不支援common.js規範(require方法引入)

2,只有mode是production才會生效,development是不生效的

配置:

這個配置是有***的,開啟之後會對less,css,png檔案都搖樹,所以需要另外配置來排除這些型別的檔案

在package.json檔案中 配置

Webpack 自定義外掛程式

1,webpack背景知識 一款前端專案開發構建工具。或者用gulp。前後端分離的開發環境,解析不同的資源檔案,統一打包分包,按需載入,優化等。主要構成,入口 出口,loader和plugins model rules等配置,webpack自身提供外掛程式如 分析 壓縮 html provider等...

webpack 自定義loader到發布

loader 就是乙個 node 模組 loader 匯出乙個函式,loader 會在轉換源模組 resource 的時候呼叫該函式 loader 的功能 把源模組轉換成通用模組 webpack.config.js const path require path module.exports mod...

webpack 效能優化

1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...