构建与分发系统

概述

Vue.js 使用复杂的构建系统为不同的环境创建优化的分发版本。该构建系统将 TypeScript 源文件编译成各种 JavaScript 模块格式，包括开发和生产两种变体。

构建流程

来源：scripts/build.js21-97

构建配置

构建系统配置为从单个代码库生成多种分发格式。构建过程由 scripts/build.js 脚本协调，该脚本使用 Rollup 进行打包，并使用 Terser 对生产版本进行代码压缩（minification）。

来源：scripts/build.js38-61 scripts/build.js63-89

构建过程包括以下步骤：

使用 Rollup 捆绑所有必需的代码
根据目标格式应用适当的转换
使用 Terser 压缩生产版本
应用激进优化，包括移除纯函数
生成输出文件的大小报告

分发格式

Vue.js 以多种格式分发，以支持各种使用场景

格式	文件名模式	用例
UMD	vue.js / vue.min.js	通过 `<script>` 标签直接在浏览器中使用
CommonJS	vue.common.js	Node.js 环境
ES 模块	vue.esm.js	现代打包工具（webpack, Rollup）
Node 的 ES 模块	vue.runtime.mjs	支持 ESM 的 Node.js

每种格式都有两种变体

完整构建版本 - 包含模板编译器
仅运行时构建版本 - 体积更小，但需要预编译模板

来源：根据构建输出分析得出的图表

开发版本与生产版本

Vue.js 提供针对开发和生产环境优化的不同构建版本。开发版本包含有用的警告和调试信息，而生产版本则经过压缩和优化以提高性能。

来源：dist/vue.common.js1-5 dist/vue.runtime.common.js1-5

CommonJS 分发版本使用环境检测来自动加载合适的构建版本

这使得应用程序在部署时可以自动使用优化的生产构建版本，同时开发者在开发过程中也能收到有用的警告。

构建脚本架构

构建脚本（scripts/build.js）旨在按顺序处理多个构建配置

来源：scripts/build.js23-36 scripts/build.js38-61 scripts/build.js63-89

构建过程包括以下步骤：

从配置文件加载所有构建配置
（可选）根据命令行参数过滤构建版本
按顺序处理每个构建配置
对于每个配置：
- 使用 Rollup 捆绑代码
- 生成输出代码
- 如果是生产构建版本则进行压缩
- 写入输出文件
- 报告文件大小（以及生产构建版本的 gzip 压缩大小）

选择正确的构建版本

选择合适的 Vue.js 构建版本取决于您的使用场景

用例	推荐构建版本
通过 CDN 直接在浏览器中使用	UMD (vue.min.js)
使用 vue-loader 的 Webpack/Rollup	仅运行时 ES 模块 (vue.runtime.esm.js)
Node.js 服务端渲染	CommonJS (vue.runtime.common.js)
支持 ESM 的 Node.js	Node ESM (vue.runtime.mjs)

仅运行时构建版本更小、更高效，但需要预编译模板。这通常通过使用构建工具（如 webpack 的 vue-loader 或 rollup-plugin-vue）来完成。

大小优化

Vue.js 构建系统包含优化，以最小化捆绑包大小

代码压缩 - 生产构建版本使用 Terser 进行压缩
死代码消除 - 像 makeMap 这样的纯函数被标记为移除
环境特定构建 - 开发代码从生产构建版本中剥离
仅运行时构建 - 使用构建工具时可以排除模板编译器

构建脚本还报告原始文件大小和 gzip 压缩文件大小，以帮助跟踪捆绑包大小

vue.common.prod.js 93.32kb (gzipped: 34.53kb)
vue.runtime.common.prod.js 63.52kb (gzipped: 22.89kb)
vue.esm.prod.js 93.69kb (gzipped: 34.65kb)
vue.runtime.esm.prod.js 63.89kb (gzipped: 23.01kb)

来源：scripts/build.js63-89

结论

Vue.js 的构建和分发系统旨在为各种环境提供优化的构建版本，同时在功能和文件大小之间保持平衡。通过提供多种分发格式并区分开发和生产构建版本，Vue.js 确保了在整个 JavaScript 生态系统中的高效使用。