Vue3的Tree-Shaking是如何实现的？

哈哈，今天咱们来聊个有趣的话题——Vue 3 的 Tree-Shaking。 事实上... 你肯定听说过这个词，但具体是啥玩意儿？别急，我给你慢慢道来。

先说说什么是 Tree-Shaking

Tree-Shaking，直译过来就是"摇树"。想象一下你有一棵大树，里面有很多枝叶。那些没用的枝叶就像代码里没被用到的部分。Tree-Shaking 就是把这些没用的枝叶给剔除掉，只留下真正需要的部分，层次低了。。

在前端开发中， 这意味着打包工具会分析你的代码，找出那些没有被使用到的函数、变量或模块，然后把它们从到头来的打包文件中移除掉。这样就能大幅减小代码体积，提升应用性能，拖进度。。

Vue 2 的痛点

在 Vue 2 时Zuoang里面啊，全局单例设计让 Tree-Shaking 大体上形同虚设。为什么这么说呢？主要原因是 Vue 2 把所有 API 全都挂载在全局 Vue 对象上了：，本质上...

import Vue from 'vue'
const app = new Vue
app.$mount

这种设计导致一个问题——即使你只用了 ref 和 computed 两个 API，整个 Vue 的运行时库还是会被完整地打包进去。体积大得吓人，还行。