请解释 Vue 3 中的 Tree-shaking 特性，并说明它的实际作用有哪些？
考察说明
考查对 Vue 3 框架中 Tree-shaking 概念及其工程意义的理解。
回答思路
- 【回答框架 1】Tree-shaking 是一种通过静态分析消除未使用代码的优化手段，依赖于 ES Module 的静态导入导出结构。它能够在打包时移除未引用的导出，从而减小最终产物的体积。
- 【回答框架 2】Vue 3 从源码层面支持 Tree-shaking，其核心是使用 ES Module 编写代码，并提供了按需引入的 API，例如 watch、computed 等，开发者只引入所需功能，未引入的部分不会被打包。
- 【回答框架 3】其作用主要体现在三个方面：减小最终打包体积，提升页面加载速度；优化依赖体积，对大型应用尤其明显；同时促进更精细的代码分割，便于长期维护和扩展。
- 【回答框架 4】实现 Tree-shaking 需要配合打包工具，如 Vite、Rollup 或 Webpack 的 production 模式，它们会基于模块的副作用标记进行摇树优化。若代码包含副作用，优化可能失效，需通过 package.json 的 sideEffects 字段来控制。
- 【关键点 1】Tree-shaking 依赖 ES Module 静态结构，可消除未使用代码。
- 【关键点 2】Vue 3 的 API 大多支持按需引入，直接受益于 Tree-shaking。
- 【关键点 3】实际效果是减小打包体积，提升加载性能，尤其在大型项目中显著。
- 【关键点 4】需配合打包工具并正确处理副作用标记，否则可能无法去除死代码。
- 【易错点 1】误以为 Tree-shaking 能自动消除所有未使用代码，实际受副作用影响可能失效。
- 【易错点 2】忽略 package.json 的 sideEffects 属性，导致摇树优化不彻底。
- 【易错点 3】混淆 Tree-shaking 与代码压缩，它们作用机制不同，压缩不删除未引用代码。