Vue3 框架设计的核心要素

学习本章时，要求大家对常用的模块打包工具有一定的使用经 验，尤其是 rollup.js 和 webpack。这里所说的是Vue3框架中一些杂乱的知识点。

对于一个优秀的框架来说，衡量一个框架的指标之一就是看它的开发体验如何。

对于警告信息的处理

在框架设计和开发过程中，提供友好的警告信息至关重要。始终提供 友好的警告信息不仅能够帮助用户快速定位问题，节省用户的时间，还能够让框架收获良好的口碑，让用户认可框架的专业性。

控制框架代码的体积

框架的大小也是衡量框架的标准之一。当然，代码量越少，体积越少。像之前所提及的警告信息，则需要额外的代码来实现，Vue使用rollup.js 对项目进行构建，在输出的时候会输出两个版本，其中一个用于开发环 境，如 vue.global.js，另一个用于生产环境，如vue.global.prod.js。

会用一个全局变了‘dev’来控制版本切换，如果为true，则会执行到判断条件中的代码，如果为fasle则代码为dead code，通过tree-shaking会移除这些代码。

良好的tree-shaking

Tree-Shaking 指的就是消除那些永远不会被执行的代 码，也就是排除 dead code。想要实现 Tree-Shaking，必须满足一个条件，即模块必须是 ESM（ES Module），因为 Tree-Shaking 依赖 ESM 的静态结构。

Tree-Shaking 中的第二个关键点——副作用。如果一个 函数调用会产生副作用，那么就不能将其移除。

注意注释代码 /#PURE/，其作用就是告诉 rollup.js，对于 foo 函数的调用不会产生副作用，你可以放心地对其进行 Tree- Shaking。

框架应该输出怎样的构建产物

不同类型的产物是为了满足不 同的需求。为了让用户能够通过 的处理，前者直接将 DEV 常量替换。

错误处理

提供了 callWithErrorHandling 接口函数，来对错误进行统一处理。

TS 支持

源码通过 TypeScript 开发，以保证可维护性。