如何压缩前端项⽬中 JS 的体积？

分析前端打包体积工具

使⽤分析⼯具来评估和分析前端打包体积。常⽤的⼯具包括Webpack Bundle Analyzer、 Source Map Explorer等。

如何压缩js 

• terser或者 uglify，及流⾏的使⽤ Rust 编写的 swc 压缩混 淆化 JS。
• gzip 或者 brotli 压缩，在⽹关处(nginx)开启
• 使⽤ webpack-bundle-analyzer 分析打包体积，替换占⽤较⼤体积的库，如 moment -> dayjs
• 使⽤⽀持 Tree-Shaking 的库，对⽆引⽤的库或函数进⾏删除，如 lodash -> lodash/es
• 对⽆法 Tree Shaking 的库，进⾏按需引⼊模块，如使⽤ import Button from 'antd/lib/Button' ，此处可⼿写 babel-plugin ⾃动完成，但不推荐
• 使⽤ babel (css 为 postcss) 时采⽤ browserlist ，越先进的浏览器所需要的 polyfill 越少，体积更⼩
• code spliting，路由懒加载，只加载当前路由的包，按需加载其余的 chunk，⾸⻚ JS 体积变⼩ (PS: 次条 不减⼩总体积，但减⼩⾸⻚体积)
• 使⽤ webpack 的 splitChunksPlugin，把运⾏时、被引⽤多次的库进⾏分包，在分包时要注意避免某⼀ 个库被多次引⽤多次打包。此时分为多个 chunk，虽不能把总体积变⼩，但可提⾼加载性能 (PS: 此条不减⼩总体积，但可提升加载性能)