Tree Shaking 通过静态分析 ES6 import/export 消除未使用导出代码，需满足使用 ESM 语法、production 模式、正确声明 sideEffects 等前提，从而直接减小打包体积。
直接减小打包后 JavaScript 体积，核心是“删冗余、分资源、压字节、看真相”——不是盲目压缩，而是有策略地精简和组织代码。
启用 Tree Shaking 剔除死代码
Tree Shaking 能在构建时自动移除未被引用的导出模块，前提是项目使用 ES6 模块语法（import/export），且构建工具处于 production 模式。
- 避免混用 CommonJS 的 require() 或动态 import() 导入方式来引入工具函数，否则可能阻断静态分析
- 检查第三方库是否提供 ESM 版本（查看其 package.json 中的 "module" 字段），优先选用
- Webpack 5+ 和 Vite 默认开启 Tree Shaking；若用旧版 Webpack，确保 mode: 'production' 已配置
做代码分割（Code Splitting）降低首屏压力
把大包拆成小块，让浏览器只加载当前需要的部分，显著减少初始 JS 体积。
- 路由级分割：React Router 用 lazy + Suspense，Vue Router 直接写 component: () => import('./About.vue')
- 组件/功能级分割：对富文本、图表、PDF 渲染等重型模块，改用 import('./Editor.js').then(...) 动态加载
- 自动提取公共依赖：Webpack 配置 splitChunks.cacheGroups.vendor，把 react、lodash 等抽成独立 vendors.js，利于长期缓存
用 Terser 压缩混淆输出代码
Terser 是目前主流构建工具（Webpack/Vite/Rollup）默认集成的 JS 压缩器，支持 ES6+ 语法，比老版 UglifyJS 更可靠。
立即学习“Java免费学习笔记（深入）”；
- Webpack 中无需额外安装，mode: 'production' 会自动启用 TerserPlugin
- 如需自定义，可配置 terserOptions 开启变量名混淆、删除 console、保留特定注释等
- Vite 项目默认已启用，可通过 build.minify: 'terser' 显式指定，并用 build.terserOptions 调优
用体积分析工具定位“肥肉”模块
光靠感觉优化容易跑偏。必须借助可视化工具看清谁占了最多空间。
- webpack-bundle-analyzer：Webpack 项目运行后生成交互式网页，点击模块可下钻查看依赖树
- vite-bundle-visualizer：Vite 用户推荐，安装即用，输出直观的环形图与文件列表
- source-map-explorer：基于 sourcemap 分析真实代码来源，能识别出“某行业务代码实际引入了整个 lodash”这类隐性膨胀
