Vue 3.0 的 Tree-shaking（摇树优化）是一项关键的性能优化特性。它允许打包工具（如 Vite、Webpack）在构建过程中，通过静态分析代码，自动移除那些在你的项目中未被实际使用到的 Vue API 和模块代码，从而显著减小最终打包文件的体积。 为了让你快速把握核心，下表对比了 Vue 2 与 Vue 3 在此特性上的主要区别：
| 特性维度 | Vue 2 | Vue 3 |
|---|---|---|
| 模块化设计 | 全局 API，整体打包 | 基于 ES Module 的模块化设计，API 可独立引入 |
| 打包结果 | 即使只使用部分功能，也需引入整个 Vue 库 | 仅打包你实际导入并使用的 API |
| 体积控制 | 难以优化，包体积相对固定 | 精细可控，有效减小最终打包大小 |
🌳 核心原理：基于 ESM 的静态分析
Tree-shaking 能够实现，主要得益于 ES Modules (ESM) 的静态模块结构。ESM 的 import和 export语句是静态的，这意味着打包工具在构建阶段（而非代码运行阶段）就能确定模块之间的依赖关系，分析出哪些导出（export）没有被任何导入（import）引用，从而安全地移除这些“死代码”。 Vue 3.0 的源码完全采用 ESM 编写，并且将其全局 API（如 ref、reactive、computed等）拆分成独立的函数，可以从 vue主库中按需引入。这正是 Tree-shaking 发挥作用的基础。
💡 举例说明
假设你的组件只需要响应式数据引用 (ref) 和计算属性 (computed)，而不需要其他 API（如 watch或 reactive）。你可以这样按需导入：
<script setup>
import { ref, computed } from 'vue'; // 只从 'vue' 中导入需要的 API
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>
在项目构建时，打包工具（如 Vite 内置的 Rollup）会进行静态分析：
- 它发现你只从
vue模块中导入了ref和computed。 - 它会确认
ref和computed的相关代码确实被使用了。 - 对于
vue模块中其他未被导入和使用的 API（如watch、reactive、onMounted等），工具会认为它们是“死代码”，并在最终的生产环境打包文件中将其移除。
对比 Vue 2：在 Vue 2 中，Vue 实例是一个包含所有功能的全局对象，即使你只用了 data和 methods，最终打包也会包含整个 Vue 运行时，无法进行此类优化。
⚠️ 确保 Tree-shaking 生效的注意事项
为了让 Tree-shaking 达到最佳效果，建议你遵循以下实践：
- 使用 ES Module 语法：始终使用
import/export语法，避免使用require等 CommonJS 语法。 - 按需导入：从
vue等支持 Tree-shaking 的库中按需导入特定函数，而非导入整个库。 - 使用支持的构建工具：选择 Vite、Rollup 或 Webpack 4+ 等原生支持 Tree-shaking 的现代构建工具。Vite（基于 Rollup）在此方面表现尤为出色。
- 注意副作用声明：极少数情况下，如果你的代码或依赖的库存在“副作用”（即仅导入就会执行某些操作，可能影响项目），可能需要通过注释等方式告知打包工具，但 Vue 3 本身的模块已良好处理了这一点。
💎 总结
Vue 3.0 的 Tree-shaking 特性通过其模块化的架构设计和对 ES Modules 的全面采用，使得打包工具能够智能地移除未使用的代码。这直接带来了更小的打包体积、更快的页面加载速度以及更优的用户体验。你只需在开发中养成按需导入的习惯，就能轻松享受这一优化带来的好处。 希望以上的解释和示例能帮助你清晰地理解 Vue 3.0 中的 Tree-shaking 特性。
