【滴滴】如何壓縮前端項(xiàng)目中 JS 的體積

terser^[2] 或者 uglify^[3]，及流行的使用 Rust 編寫的 swc 壓縮混淆化 JS。

1. gzip 或者 brotli 壓縮，在網(wǎng)關(guān)處(nginx)開啟
2. 使用 webpack-bundle-analyzer 分析打包體積，替換占用較大體積的庫(kù)，如 moment -> dayjs
3. 使用支持 Tree-Shaking 的庫(kù)，對(duì)無(wú)引用的庫(kù)或函數(shù)進(jìn)行刪除，如 lodash -> lodash/es
4. 對(duì)無(wú)法 Tree Shaking 的庫(kù)，進(jìn)行按需引入模塊，如使用 import Button from 'antd/lib/Button'，此處可手寫 babel-plugin 自動(dòng)完成，但不推薦
5. 使用 babel (css 為 postcss) 時(shí)采用 browserlist，越先進(jìn)的瀏覽器所需要的 polyfill 越少，體積更小
6. code spliting，路由懶加載，只加載當(dāng)前路由的包，按需加載其余的 chunk，首頁(yè) JS 體積變小 (PS: 次條不減小總體積，但減小首頁(yè)體積)
7. 使用 webpack 的 splitChunksPlugin，把運(yùn)行時(shí)、被引用多次的庫(kù)進(jìn)行分包，在分包時(shí)要注意避免某一個(gè)庫(kù)被多次引用多次打包。此時(shí)分為多個(gè) chunk，雖不能把總體積變小，但可提高加載性能 (PS: 此條不減小總體積，但可提升加載性能)

Reference