2.2 控制框架代码的体积

开发环境需要大量友好警告，生产环境又要求体积足够小——__DEV__ 常量配合 dead code 消除，让这两件事同时成立。

一、体积也是衡量标准

• 框架的大小同样是衡量框架的标准之一。
• 在实现同样功能的情况下，代码越少越好：体积越小 → 浏览器加载资源的时间越少 → 页面越快。

二、输出开发版与生产版两份资源

Vue.js 输出资源时会同时输出两个版本：

三、__DEV__ 常量与 dead code

Vue.js 3 的源码中，每一个 warn 函数的调用都会配合 __DEV__ 常量的检查：

if (__DEV__ && !res) {
  warn(
    `Failed to mount app: mount target selector "${container}" returned null.`
  )
}

构建时由 rollup / webpack 的常量替换插件处理 __DEV__：

• 构建开发环境资源 → __DEV__ 替换为 true，警告逻辑保留；
• 构建生产环境资源 → __DEV__ 替换为字面量 false，条件恒不成立，这段永远不会被执行的代码称为 dead code，它不会出现在最终产物中。

常量替换只是第一步：真正让代码消失的是后续的 Tree-Shaking / 压缩（dead code elimination），详见 2.3 框架要做到良好的 Tree-Shaking。

结论：在开发环境中为用户提供友好的警告信息的同时，不会增加生产环境代码的体积。

相关

• 2.1 提升用户的开发体验：这些警告信息本身是怎么写的。
• 2.3 框架要做到良好的 Tree-Shaking：dead code 被彻底剔除的前提。