Vite 源码解读系列（图文结合） —— 构建篇

哈喽，很高兴你能点开这篇博客，本博客是针对 Vite 源码的解读系列文章，认真看完后相信你能对 Vite 的工作流程及原理有一个简单的了解。

Vite 是一种新型的前端构建工具，能够显著提升前端开发体验。

我将会使用图文结合的方式，尽量让本篇文章显得不那么枯燥（显然对于源码解读类文章来说，这不是个简单的事情）。

如果你还没有使用过 Vite，那么你可以看看我的前两篇文章，我也是刚体验没两天呢。（如下）

• Vite + Vue3 初体验 —— Vite 篇
• Vite + Vue3 初体验 —— Vue3 篇

本篇文章是 Vite 源码解读系列的第二篇文章，往期文章可以看这里：

• Vite 源码解读系列（图文结合） —— 本地开发服务器篇

本篇文章解读的主要是 vite 源码本体，上一篇文章中提到 vite 通过 connect 库提供开发服务器，通过中间件机制实现多项开发服务器配置。而 vite 在本地开发时没有借助 webpack 或是 rollup 这样的打包工具，而是通过调度内部 plugin 实现了文件的转译，从而达到小而快的效果。

本篇文章，我会针对 vite 的生产产物构建，也就是 vite build 命令进行详细解析。

好了，话不多说，我们开始吧！

vite build

在运行 vite build 命令时，内部调用了 doBuild 方法，该方法最终使用 rollup 来进行应用构建。

resolveConfig

和本地开发服务类似，doBuild 第一步先进行了配置信息的收集。在这一步中，resolveConfig 方法做了这几件事情：

• 处理插件执行顺序
• 合并插件配置
• 处理 alias
• 读取环境变量配置
• 导出配置

最终将配置导出后，用于接下来的构建操作，下面是导出的配置详情，感兴趣的同学可以自己打断点查看。（如下图）

接下来，是对一些变量的定义，以及输出当前 vite 版本。（如下图）

配置项	说明
config.build	vite 的构建选项
input	项目入口文件，默认是项目根目录下的 index.html
outDir	构建产物的输出目录
ssr	生成面向 SSR 的构建
libOptions/lib	构建为库时才需要

整合插件

然后，vite 整合了项目配置的插件和 vite 自带的插件，用于后续 rollup 的编译工作。（如下图）

生成 rollup 配置

接下来，vite 将用户传入的 rollup 选项配置与默认配置进行合并，合并后构建了一个 rollOptions，提供给 rollup 打包使用。（如下图）

接下来，vite 配置了输出配置，主要分为三类 ssr、库模式、普通应用模式。（如下）

接下来，vite 内部处理了 watch 属性，提供了构建时的监听属性支持。

编译产物

最后，vite 使用 rollup 编译文件，然后将这些文件输出到指定的构建产物目录中。（如下图）

最后，将这些 bundle 合并输出后，就生成了构建后的产物，可以使用 vite preview 来进行预览查看效果。

小结

到这里，vite build 的源码部分就解析完了，这部分代码要比 vite dev 简单很多。

我们还是画一个简单的流程图来总结一下吧。（如下图）

vite 源码解读系列，我们还剩下贯穿全文的插件（plugin）体系还没有进行解析，而 rollup 也是通过调用插件 plugin 完成的编译。

下一章，我们将对 vite plugin 进行解析，对最常用的 @vitejs/plugin-vue 插件进行解析。

最后一件事

如果您已经看到这里了，希望您还是点个赞再走吧~

您的点赞是对作者的最大鼓励，也可以让更多人看到本篇文章！

如果觉得本文对您有帮助，请帮忙在 github 上点亮 star 鼓励一下吧！