提升用户的开发体验
衡量一个框架是否足够优秀的指标之一就是看它的开发体验如何,其中是否提供了友好的警告信息至关重要。
在源码中,警告信息是通过 '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-browser.js | 当开发者直接通过 <script type="module"> 标签在浏览器中加载 Vue 模块时,esm-browser.js 已经处理好所有环境变量,能够直接在浏览器中运行。使用场景:无需打包工具的场景,直接在浏览器中加载和执行。 |
---|---|
esm-bundler.js | 当开发者使用构建工具(如 Webpack 或 Vite)进行开发时,通常使用的是 esm-bundler.js 格式。这个格式专门为打包工具设计的,允许构建工具在打包时对环境变量进行替换以及其他优化处理。 使用场景:需要通过打包工具对代码进行进一步优化或处理的场景。 |
特性开关
“特性开关”指的是框架设计中允许开发者关闭不需要的功能的机制。通过这种机制,打包工具可以通过 Tree-shaking 排除那些未使用的代码,从而优化打包体积和性能。这在开发中很实用,尤其是当你只需要使用框架的一部分功能时,可以避免打包多余的代码。
错误处理
Vue 提供了统一的错误处理机制,允许开发者通过全局或组件级别的配置来捕获和处理这些错误。
良好的 TypeScript 类型支持
文章参考:《Vue.js设计与实现》霍春阳著