tree shaking 需代码（es模块）、配置（production模式+usedexports）、依赖（sideeffects声明）三者协同才能生效，commonjs或动态import会阻断分析，须配合可视化工具验证效果。
Webpack 的 Tree Shaking 不是开个配置就自动生效的“一键瘦身”功能，它依赖代码写法、构建配置和依赖管理三者协同，才能真正剔除未使用的函数、类、工具方法甚至 JSON 字段。
确保使用 ES 模块语法并避免动态导入
Tree Shaking 只对静态可分析的 import/export 有效。CommonJS（require/module.exports）或动态 import() 会中断依赖链，导致整块模块被保留。
- 项目内所有自定义模块统一用
export function xxx和import { xxx }，禁用require - 第三方库优先选 ESM 版本，比如用
lodash-es替代lodash；若必须用 CJS 包，考虑通过externals或别名方式隔离 - 避免
import(`./pages/${page}.vue`)这类变量拼接路径的动态导入，它会让 Webpack 放弃分析，保留整个目录下所有模块
正确声明 sideEffects 并验证副作用范围
Webpack 默认不敢删掉可能有副作用的文件（如全局样式注入、polyfill 执行），sideEffects 字段就是告诉它“哪些文件可以安全摇掉”。
- 在项目根目录
package.json中设置："sideEffects": false表示全项目无副作用（适合纯逻辑库） - 更常见的是按需声明：
"sideEffects": ["*.css", "*.scss", "src/utils/polyfill.js"]，其余 JS 文件都可被分析裁剪 - 注意：CSS 文件即使没被 JS 引用，只要列在
sideEffects里就不会被删；反之，漏写一个有副作用的文件，可能导致样式丢失或初始化失败
配合生产模式与代码分割精准控制裁剪粒度
Tree Shaking 在 mode: 'production' 下才默认启用，但仅靠它还不够——未拆分的 chunk 容易把业务逻辑、UI 组件、工具函数混在一起，导致“想摇的摇不掉，不想摇的被连带删了”。
- 启用
optimization.usedExports: true（Webpack 5+ 默认开启），让每个模块标记自身哪些导出被使用 - 配置
splitChunks手动分块，例如将vue、pinia、axios单独抽成vendor块，再对业务模块做细粒度拆分（如ui/、api/、utils/） - 每个分块内部都能独立触发 Tree Shaking，比全包打包时效果更彻底
用可视化工具验证是否真起作用
不看报告，你永远不知道哪些“大块头”其实只用了 1%。靠猜不如靠图。
- 安装
webpack-bundle-analyzer，在webpack.config.js的plugins中加入它 - 运行
npx webpack --mode=production --stats=verbose --profile后打开分析页面，找体积异常大的模块（比如moment占 200KB 却只调了format） - 点击模块查看引用链：如果发现某处写了
import * as math from './math'，那就立刻改成具名导入import { add } from './math'
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
