在 Vue 3 中，Tree Shaking（摇树优化） 是一个非常重要的性能优化特性，它可以帮助打包工具（如 Webpack、Vite、Rollup）移除项目中未使用的代码，从而减小最终生成的包体积。

Vue 3 实现 Tree Shaking 的关键在于其采用了 模块化设计（ES Modules），并提供了多个按需引入的 API。

一、Vue 3 Tree Shaking 特性的原理

原理简述：

• ES Modules 是静态结构的：打包工具可以在构建阶段识别哪些模块被使用、哪些未被使用。
• Vue 3 将核心功能拆分为多个独立的模块（函数），比如 reactive、ref、watch 等。
• 如果你只引入 ref 和 watch，打包工具就不会引入 reactive、computed 等未使用模块。

二、举例说明

示例 1：使用 Vue 3 的 Composition API

// MyComponent.vue
<script setup>
import { ref } from 'vue' // 只引入了 ref

const count = ref(0)
</script>

构建分析：

由于你只使用了 ref，构建工具会丢弃 Vue 中未使用的 API（如 reactive、watch、computed、provide 等），从而减小最终打包的大小。

三、和 Vue 2 的区别

在 Vue 2 中，即使你只用到部分功能，如 data 和 methods，构建后的包中仍然包含整个 Vue 框架的所有功能。

四、推荐做法

要确保 Tree Shaking 生效，应注意以下几点：

1. 使用原生 ES Module 语法，不要用 require()。
2. 避免使用 Vue 全局对象来访问功能（如 Vue.ref()）——应该用 import { ref } from 'vue'。
3. 使用构建工具支持 Tree Shaking（如 Vite、Rollup、Webpack 5+）。
4. 在 package.json 中确保 vue 指向的是 ES 模块版本（Vite 默认支持）。

五、深入理解：按需引入的例子

如果你写这样一段代码：

import { createApp, ref } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

打包工具只会将 createApp 和 ref 打入最终包中，Vue 其它的 Composition API 不会被包含。

六、总结

Vue 3 的 Tree Shaking 特性通过模块化、按需引入和构建工具支持，有效地减少了生产环境下的打包体积，提高了性能。使用时，只需遵循模块引入的规范，就可以自动享受到摇树优化的好处。

如果你希望，我也可以用 vite + rollup-plugin-visualizer 为你演示这个特性在实际打包中的表现。