提升用户的开发体验
衡量一个框架是否足够优秀的指标之一就是看它的开发体验
警告信息
- 始终提供友好的警告信息不仅能够帮助用户快速定位问题，节省用户的时间，还能够让框架收获良好的口碑，让用户认可框架的专业性
优化控制台的输出
- 提示需要做到清晰明了，直观
- DevTools设置
控制框架代码的体积
代码越少越好，这样体积就会越小
框架要做到良好的 Tree-Shaking
Tree-Shaking
- Tree-Shaking 指的就是消除那些永远不会被执行的代码，也就是排除 dead code
-
- 实现 Tree-Shaking，必须满足一个条件，即模块必须是ESM（ES Module），因为 Tree-Shaking 依赖 ESM 的静态结构
- 如果一个函数调用会产生副作用，那么就不能将其移除
-
- 副作用就是，当调用函数的时候会对外部产生影响（例如修改了全局变量）
- 注释代码 /#PURE/，其作用就是告诉 rollup.js，对于被注释的函数的调用不会产生副作用
-
- 在 Vue.js 3 的源码中，基本都是在一些顶级调用的函数上使用 /#PURE/ 注释
框架应该输出怎样的构建产物
直接在 HTML 页面中使用
- 输出IIFE格式的资源(Immediately Invoked Function Expression)即“立即调用的函数表达式”，易于用JavaScript 来表达
-
直接引入 ESM 格式的资源
在 Node.js 中通过 require 语句引用资源(cjs)
- 服务端渲染
特性开关
作用
- 对于用户关闭的特性，可以利用 Tree-Shaking 机制让其不包含在最终的资源中
- 该机制为框架设计带来了灵活性，可以通过特性开关任意为框架添加新的特性，而不用担心资源体积变大。
- 框架升级时，可以通过特性开关来支持遗留 API，这样新用户可以选择不使用遗留 API，从而使最终打包的资源体积最小化
实现原理
- 利用 rollup.js 的预定义常量插件来实现
- FEATURE_OPTIONS_API 类似于 DEV
- 当 Vue.js 构建资源时，如果构建的资源是供打包工具使用的（即带有 -bundler 字样的资源），那么上面的代码在资源中会变成
- VUE_OPTIONS_API 是一个特性开关，用户可以通过设置__VUE_OPTIONS_API__ 预定义常量的值来控制是否要包含这段代码
- 用户可以使用 webpack.DefinePlugin 插件来实现
VUE_OPTIONS_API 开关作用
- Vue.js2 中，编写的组件叫作组件选项 API
- 在 Vue.js 3 中，推荐使用 Composition API 来编写代码
- 为了兼容 Vue.js 2，在 Vue.js 3 中仍然可以使用选项 API 的方式编写代码。如果明确知道自己不会使用选项 API，用户就可以使用 VUE_OPTIONS_API 开关来关闭该特性，这样在打包的时候Vue.js 的这部分代码就不会包含在最终的资源中，从而减小资源体积
错误处理
为用户提供统一的错误处理接口
- 提供registerErrorHandler 函数
- 用户使用它注册错误处理程序
- 在 callWithErrorHandling 函数内部捕获错误
- 把错误传递给用户注册的错误处理程序
