Tree Shaking 不直接显示删减代码，需配合体积分析工具验证效果；推荐 vite-bundle-visualizer 或 rollup-plugin-visualizer 生成 treemap 图，重点排查第三方库和重复 utils 的体积占比，再通过命名导入、ESM 入口、sideEffects 配置三方面定位失效原因，最后结合动态导入实现二次瘦身。
Tree Shaking 本身不直接“显示”删了哪些代码，它默默剔除未使用的导出；要验证它是否生效、哪里没摇干净、哪块体积还虚胖，必须配合包体积分析工具——这是优化闭环里最关键的一环。
先用可视化工具看清现状
推荐使用 vite-bundle-visualizer（Vite 项目）或 rollup-plugin-visualizer（Rollup 场景），它们生成交互式 treemap 图，直观展示每个模块在最终 bundle 中的体积占比。
- 安装后加一行脚本：
"build:analyze": "vite build --visualizer" - 执行后打开生成的
stats.html，重点看右侧大片区域——通常是第三方库（如 element-plus、lodash）或重复引入的 utils 文件 - 如果发现某个组件库占了 40% 体积，但你只用了 3 个按钮，说明 Tree Shaking 没完全起作用
对照体积报告反查 Tree Shaking 失效点
看到大体积模块后，不是立刻改代码，而是带着问题回溯三个关键检查项：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
是否用了命名导入？比如
import { debounce } from 'lodash-es'能摇掉其他函数；而import _ from 'lodash-es'整个对象可能保留在 bundle 中 -
第三方库是否提供 ESM 入口？查它的
package.json：有"module"或"exports": { ".": { "import": ... } }才支持静态分析 -
你的
package.json里sideEffects设对了吗？设成false却又 import 了 CSS，样式就没了；应写成["*.css", "*.scss"]显式保留
验证优化是否真正落地
每次调整完（比如改用自动导入插件、声明 sideEffects、切换 lodash-es），都重新跑一次 build:analyze：
立即学习“Java免费学习笔记（深入）”；
- 对比前后 treemap：element-plus 的体积是否从 1.2MB 降到 280KB？
- 点击具体文件，看它内部哪些导出被标记为 “unused”（未使用）——这是 Tree Shaking 成功的直接证据
- 注意 gzip 后体积：有些代码虽未删，但压缩后变小了，别把压缩收益误认为 Tree Shaking 效果
延伸技巧：结合动态导入做二次瘦身
Tree Shaking 解决的是“定义了但没用”的问题；对“用了但不常访问”的模块（如后台管理页的 Excel 导出功能），可叠加动态导入：
- 把 heavy 模块改成
const Exporter = defineAsyncComponent(() => import('./Exporter.vue')) - 体积分析图中它会独立成 chunk，不再挤占主包，也避免因引用导致相关依赖无法被 Tree Shaking
- 这种组合策略（静态剔除 + 动态拆分）比单靠 Tree Shaking 更有效
