在我們剛開始踏入Vue的世界是透過Node.js來安裝最新版本的Vue專案，其底層建構器就是Vite負責。但網路很多資源都還是應用Vue CLI寫出來的範本，究竟這兩者之間存在什麼差異？今天就好好探究Vite是如何成為Vue現在的新寵兒吧！

◎建構器的概念：幫助專案設定好環境與相關配置等，讓開發者能夠專注開發

Vue CLI

全名為Vue.js Command-Line Interface，是一套基於Vue.js進行快速開發的完整系統。
進到Vue CLI官網就發現已經發出維護模式的公告，但我們還是列出它的特點：

⚠️ Vue CLI 现已处于维护模式!
现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。
另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。

• 基於webpack所建構，並整合webpack-dev-server（本地伺服器）
  Webpack是一個靜態模塊打包工具，當我們的開發不單純只是一個js檔可以解決的內容，就需要進行編譯、打包工具幫我們建構。
• 內部vue-cli-service服務提供serve、build和inspect命令，進行專案打包、測試…等

開發中的狀態

在Vue CLI開發期間，透過webpack綁定模塊，過程需要不斷監聽並以「增量的方式」建構或更新狀態，以便在瀏覽器中可以即時替換。初次建構會花比較長的時間（專案越大當然就會越久），當項目啟動完畢後的增量更新就會很快速。

Vite

該詞源自於法文，有著「快速的」意思（真是怕別人不知道它的特色呢）！

• 基於ES原生模塊有著豐富的內建功能，如熱模塊重載（HMR，運行期間存檔會自動更新瀏覽器無須重新整理）
• 預設Rollup建構指令進行打包工作

開發中的狀態

這裡我們回憶到import指令，在vite專案中我們有分為建構與非建構式module，當使用非建構式引入，這裡的指令只會是指向源代碼的開啟動作而已，而在大部分瀏覽器支援ESM的情況下，就把打包工程一部份分給了瀏覽器。

速度就是致勝關鍵

看到這裡我們都大概可以了解了，Vite就是超快，那些很慢的動作都指派給別人來做啦（蛤），至於它是怎麼做到的，詳見：Vite 是什麼? 為什麼要用 Vite? 它解決了哪些問題? 又是如何解決?
至於速度差異的起點：

• Vue CLI：使用透過Webpack機制從源代碼建構出來的項目，並在開發過程增量建構
• Vite：根據需求直接引用源代碼不需多一層建構

真要講差異之處的話

Vue CLI是基於Vue.js的開發系統，而Vite並不依賴於Vue.js。當今天我們有多個環境的專案，純js、React...等項目，我們都可以使用Vite來配置並處理！

參考資料
Vite官網
Vue CLI官網
Vite 或 Vue CLI，我该选择哪一个