框架设计的核心要素

提升用户的开发体验

衡量一个框架是否足够优秀的指标之一就是看它的开发体验如何，其中是否提供了友好的警告信息至关重要。

在源码中，警告信息是通过 'warn' 函数实现的。'warn' 函数会根据当前的环境变量来决定是否要输出警告信息，并最终通过 'console.warn' 在浏览器控制台中显示。

控制框架代码的体积

用 _DEV_ 常量来控制是否要输出警告信息。如果是生产环境，输出警告信息的代码就是 dead code，在构建资源的时候就会被移除，这样就能实现 [在开发环境中为开发者提供友好的警告信息的同时，又不会增加生产环境代码的体积] 的目的。

框架要做到良好的 Tree-Shaking

Tree-Shaking 指的是消除那些永远不会被执行的代码，也就是排除 dead code。

Rollup.js（Vue 生产环境中使用 Rollup.js 进行打包） 和 Webpack 都支持 Tree-Shaking。

问题一：为什么实现 Tree-Shaking 要满足模块必须是 ESM 这个条件？

回答：有副作用的函数，不能让 Tree-Shaking 将其移除。但是函数到底会不会产生副作用，只有代码真正运行的时候才知道。JS 本身是动态语言，要静态分析哪些代码是真正的 dead code 有难度。而 ESM 具有静态分析特性，可以在编译时确定哪些代码被使用，哪些代码可以安全地移除，ESM 的这个特性使得这种分析和进一步的优化成为可能。像 CommonJS 这样的模块系统由于其动态特性，不适合进行同样的优化。

问题二：什么是顶级调用？为什么说通常产生副作用的代码都是模块内函数的顶级调用？

回答：顶级调用指的是在顶层作用域而非在函数或者块级作用域调用函数。这些调用通常产生副作用，因为它们在模块加载时立即执行，并可能影响全局状态或其他模块的行为。

问题三：为什么要使用 /*#__PURE__*/ 注释？

回答：/*#__PURE__*/ 注释用于标记那些不会产生副作用的函数调用。这个注释可以让 rollup 更准确地识别和删除未使用的代码。
在某些情况下，即使一个函数调用在代码中未被使用，但是打包工具可能不确定这个调用是否会产生副作用，因此不敢贸然删除它。这种谨慎的处理确保了安全性，但是会导致该删的代码没有被删除。

在Vue项目中，如果明确某个函数调用没有副作用，就会用 /*#__PURE__*/ 注释。这个注释在 Rollup 和 Webpack 中都被支持。

而通常产生副作用的代码都是模块内函数的顶级调用，所以打 /*#__PURE__*/ 注释这件事不会造成很大的心智负担。在 Vue3 的源码中，基本上是在一些顶级调用的函数上使用该注释。

 

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

框架输出 IIFE 格式的资源，以及输出 ESM 格式的资源。

ESM 格式的资源有两种：用于浏览器的 esm-browser.js 和用于打包工具的 esm-bundler.js。

ESM 格式

esm-browser.js	当开发者直接通过 <script type="module"> 标签在浏览器中加载 Vue 模块时，esm-browser.js 已经处理好所有环境变量，能够直接在浏览器中运行。 使用场景：无需打包工具的场景，直接在浏览器中加载和执行。
esm-bundler.js	当开发者使用构建工具（如 Webpack 或 Vite）进行开发时，通常使用的是 esm-bundler.js 格式。这个格式专门为打包工具设计的，允许构建工具在打包时对环境变量进行替换以及其他优化处理。 使用场景：需要通过打包工具对代码进行进一步优化或处理的场景。

特性开关

“特性开关”指的是框架设计中允许开发者关闭不需要的功能的机制。通过这种机制，打包工具可以通过 Tree-shaking 排除那些未使用的代码，从而优化打包体积和性能。这在开发中很实用，尤其是当你只需要使用框架的一部分功能时，可以避免打包多余的代码。

错误处理

Vue 提供了统一的错误处理机制，允许开发者通过全局或组件级别的配置来捕获和处理这些错误。

良好的 TypeScript 类型支持

文章参考：《Vue.js设计与实现》霍春阳著