webpack分離打包antd記錄

2021-09-29 15:51:47 字數 1481 閱讀 6046

希望得到的結果是將antd按元件載入,減少首屏載入的包大小;

antd 又依賴於相應的rc模組,所以,rc同樣按功能組分離,

同時antd->moment->local->各種語言包存在依賴關係

統計結果:

首屏載入 js: 769kb 個數:34

bundle

antd

rcmoment

local

common

其他合計

307.23kb

154.95kb

454.95kb

104.05kb

106.85kb

157.67kb

219.58

1.47m

如果在按需引入antd的timer-picker等時間相關的元件時,會同時載入moment的/locale的語言庫,在我當前的場景中我只是用了中文,所以這部分開銷幾乎都是浪費的

方式統計結果:

首屏載入 js: 987kb 個數:11

bundle

common

antd

moment

local

其他合計

297.92kb

15.13kb

1.11mb

50.5kb

3.77kb

186.83kb

1690.79kb

如果選擇載入所有的antd元件,local 可以做按需載入了,但是未使用到的元件就會在首次載入時全部載入,存在一部分寬頻浪費;

統計結果:

首屏載入js: 868kb 個數:8

bundle

common

其他合計

298.01kb

819.08kb

347.22kb

1.43m

同樣存在會同時載入moment的/locale的語言庫的浪費

對比結果:

方式一 (非全量)

方式二(全量)

方式三(非全量)

包總大小

1.47m

1.65mb

1.43m

antd相關

609.9kb

1.11mb

596.82kb

首屏載入js

769kb

987kb

868kb

首屏載入個數

3411

8其他知識點

1、antd 依賴於模組[「react」, 「react-dom」, 「moment」,「rc」]

2、antd 的版本分為 antd(308kb) 和 antd-with-local(425kb) 兩個版本

webpack打包快取 webpack打包效能分析

webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮,速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式,這可以有效減少構建時間,當然,該外掛程式應用於生產環境而非開發環境,配置如下 var paralleluglifypl...

webpack打包快取 webpack打包優化探索

雖然webpack的已經公升級到了webpack4,而我們目前還在使用 webpack3,但其中的優化點都大同小異,公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3,優化js的編譯能力 scope hoisting 1performance 減小...

webpack 配置(分離)

一 下列分別是base.config.js dev.config.js prod.config.js const path require path const webpack require webpack const htmlwebpackplugin require html webpack ...