共计 1449 个字符，预计需要花费 4 分钟才能阅读完成。
哈喽，很快乐你能点开这篇博客，本博客是针对 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 激励一下吧！
