哈嘍，很高興你能點開這篇部落格，本部落格是針對 Vite 原始碼的解讀系列文章，認真看完後相信你能對 Vite 的工作流程及原理有一個簡單的瞭解。
Vite 是一種新型的前端構建工具，能夠顯著提升前端開發體驗。我將會使用圖文結合的方式，儘量讓本篇文章顯得不那麼枯燥（顯然對於原始碼解讀類文章來說，這不是個簡單的事情）。
如果你還沒有使用過 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 鼓勵一下吧！