希望得到的結果是將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 ...