Vue响应式API能被Tree Shaking剔除，因其模块化设计：各API为独立具名导出、无隐式依赖、无副作用且显式声明sideEffects:false，配合静态按需导入import{ref,computed}from'vue'即可精准打包。
Vue 响应式 API 的 Tree Shaking 优化，核心在于按需导入、避免全量引用，让构建工具能准确识别并剔除未使用的响应式功能。
为什么响应式 API 能被摇掉？
Vue 3 将响应式系统彻底模块化：reactive、ref、computed、watch、readonly 等全部作为独立的具名导出函数存在，源码位于 vue/src/reactivity/ 下各子模块。它们彼此解耦，无隐式依赖，且不产生副作用（已通过 package.json 中 "sideEffects": false 显式声明）。这使得 Webpack、Vite 或 Rollup 在静态分析时，能精准判断哪些函数未被 import，从而安全移除对应代码。
必须用对导入方式
错误写法会直接阻断 Tree Shaking：
-
全量导入 Vue 对象：
import Vue from 'vue'—— 此时所有响应式 API 都挂在 Vue 上，构建工具无法追踪具体调用路径 -
动态或条件导入：
const api = condition ? 'ref' : 'reactive'; import { [api] } from 'vue'—— ES 模块不支持动态 import 名称，会被视为有副作用，整个模块保留
正确做法是显式、静态地按需导入：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
import { ref, computed } from 'vue'—— 只打包这两个函数及其最小依赖链 - 若只用
ref，就只写import { ref } from 'vue'，reactive和watch不会进入产物
避开常见“破坏摇树”的写法
以下操作会让响应式模块失去可摇性：
- 在
setup()外部或非模块顶层使用import—— 必须保持 ES Module 的静态结构 - 手动给
globalProperties挂响应式工具：app.config.globalProperties.$ref = ref—— 这相当于强制引用，且污染全局 - 使用未导出的内部函数（如
triggerRef、shallowRef）但未显式导入 —— 它们不会自动随ref一起带入，但若没导入，也不会被打包；一旦导入就必须显式声明
验证是否生效
最直接的方式是查看最终打包产物：
- 用
vite build --report或webpack-bundle-analyzer打开分析报告 - 搜索
reactive、computed等关键词，确认仅出现你实际导入的函数名 - 对比全量导入
import Vue from 'vue'和按需导入的产物体积差异——通常可减少 2–5 KB（gzip 后）
