轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考：https://www.sitepoint.com/vitejs-front-end-build-tool-introduction/
時下大熱的vue框架又來了新開發環境構建工具——Vite,今天我們一起來了解一下這個新成員。
背景與工作方式
在過去Webpack、Rollup 等構建工具作為主場明星時，我們的程式碼都是基於ES Module 規範去寫的。一個巨大的依賴圖能夠通過import 和 export的橋樑在檔案之間被完美搭建起來。這些工具在進行本地除錯的時候會把模組預先打包成瀏覽器可讀的js bundle格式，為了進行這一過程的優化，就出現了懶載入這種方式，但懶載入並不能解決構建的問題，Webpack依舊需要提前構建非同步路由需要的模組。
隨著我們的專案逐漸變大，專案啟動的速度也會越來越慢。
而Vite則避開了這一點，它順應時代潮流而產生的，繼承了諸多前輩的優點。例如已經基本上將框架編譯掉的Svelte或是Snowpack，這些工具能夠利用現代JavaScript功能（例如ES模組）來提供更平穩，更快速的開發體驗，幾乎不需要配置，也不需要依賴於太多已安裝軟體包。Vite能夠直接利用瀏覽器本機的ES模組進行開發環境搭建，並且直接放棄捆綁步驟，比如直接在 html 檔案裡寫出這樣的程式碼：
// index.html
createApp(Main).mount(’#app’)
無論我們的應用程式大小如何，HMR都能穩定的快速更新。捆綁生產時，Vite附帶了一個預配置的構建命令，該命令可以立即進行許多效能優化。此外，Vite還能提供熱模組替換，這意味著我們在開發過程中，可以在瀏覽器中看到程式碼重新整理，甚至可以使用它來編譯專案的精簡版本，並直接用於生產。通過使用它，我們可以快速啟動Vue或React專案，而無需再使用Vue CLI或Create React App。高效、快速就是它的代名詞。
有趣的事情是：“ Vite”這個名字來自法語單詞“ fast”，發音為“ vit”。
首次安裝
如果要根據本指南進行操作，需要先在計算機上安裝Node的副本。
執行npm init @vitejs/app之後，我們可以選擇一個專案名稱和一個模板。選項包括：
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
選擇vanilla後會生成一個目錄（基於專案名稱），其中包含一些檔案，包括index.html，main.js，style.css，favicon.svg，和NPM和Git。在package.json中只包含vite的依賴和一些指令碼來構建並啟動開發環境。
之後進入專案資料夾並安裝依賴項：
cd vite-project
npm install
然後，我們可以使用啟動伺服器 npm run dev 並在http：// localhost：3000 /上檢視我們的應用程式。此時修改任何專案檔案的內容都可以立即被看到。
執行npm run build，同時將專案編譯到一個dist資料夾中，可以在其中找到JavaScript和CSS檔案，我們會發現這兩個檔案似乎都縮小了。
Vite的文件中提到，對於TypeScript檔案可以開箱即用。因此，儘管vanilla選項沒有專用的TypeScript模板，但我們應該能夠將其重新命名main.js，為main.tsVite並自動對其進行編譯。當我們把檔案重新命名並新增一些TypeScript特定的語法後，所有檔案都可以更好的進行編譯。
使用CSS時，有人會將其重新命名為CSSstyle.scss，並新增一些特定於Sass的語法。控制檯和網頁上均顯示以下錯誤：
執行npm install sass --save-dev並重新啟動觀察程式後，就可以使用Sass滿足我們的需求了。
通常，我們會事先考慮一下堆疊安裝所需的依賴項，這需要花費大量的時間進行配置，使某些工具可以更好配合我們的工作。所以在使用Vite時也優先考慮堆疊。
在實際使用中Vite令人驚歎，我們可以在一兩分鐘內就建立一個非常高階的堆疊，並且能夠輕鬆完成從JavaScript到TypeScript的轉換以及從CSS到Sass的轉換。鑑於Vite使用anindex.html作為切入點並構建為純HTML，CSS和JavaScript的特性，毫無疑問它是一個是用於靜態站點和潛在的Jamstack應用程式的出色工具。
單頁申請
接著我們來設定一個單頁應用程式，試試Vue
執行npm init @vitejs/app並選擇Vue模板後，可以獲得Vite，Vue和一個來編譯Vue的Vite外掛。如果要構建SPA，則可能要處理路由，繼續安裝Vue Router。
我們在專案中得到了簡單的Vue設定，並插入Vue的內容。安裝vue-router並配置Vue之後即可工作。調整Vite的彙總配置之後，我們可以使用Vite建立多個頁面，如文件中的多頁應用。
通過在社群中提供的外掛vite-plugin-vue-router，我們可以像使用Nuxt一樣，基於檔案路徑生成路由器。
Vite本質上是針對各自庫和複雜Web應用程式的，進行了優化的Web應用程式框架。以後一定會出現為Vite建立Vue + Vue路由器+ Vuex模板的形式，我們預感這會比Nuxt更好。不僅如此，對於React和Next.js，Svelte和Sapper / SvelteKit也是如此。
如果沒有經過測試的Web應用程式框架可以選擇所需的語言，Vite絕對是最優選擇。
與其他後端整合
一般來說，不在Jamstack的程式碼庫上的工作，基本都使用.NET或PHP作為後端。此時我們仍然可以使用Vite來優化JavaScript和CSS包，Vite具有專門針對此內容的後端整合內容（https://vitejs.dev/guide/backend-integration.html）。
按照說明進行操作之後，Vite會產生一個清單檔案，其中包含有關所有產生的捆綁軟體的資訊。並可以讀取此檔案的CSS和JavaScript捆綁包，生成<link>和<script>標籤。所有import都捆綁到中main.js，而所有動態import import('path/to/file.js')都單獨捆綁。
表現
為什麼選擇Vite（https://vitejs.dev/guide/why.html）？
經過一些測試，給人留下了深刻的印象是Vite開發伺服器可立即啟動，並且通過替換熱模組，每一次程式碼更改都會快速反映在瀏覽器中，有時甚至是即時顯示。
在這裡，測試者嘗試匯入了一個100kB的JavaScript庫，並新增了2萬行CSS，將檔案型別更改為TypeScript和Sass，強制Vite分別使用TypeScript和Sass編譯器進行編譯。儘管會有一些延遲，但結果仍然遠超預期。
開發人員經驗
在以往的開發經驗中，無論我們使用的是Grunt，Gulp，Rollup還是Webpack，這種大型複雜的專案都會花費不短的時間來除錯並確保所有工具和外掛都能正常執行。之後還會花更多的時間在修復錯誤上，改善捆綁軟體能夠優化並縮短其構建時間。
相比之下，Vite能輕而易舉地做到。測試者嘗試設定了四個堆疊，並且幾乎立即對其進行了一些自定義設定。Vite消除了兩個工具和外掛的捆綁，並新增了很多友好的預設設定，甚至可以跳過配置並直接開始工作。
如果我們有特定的需求，Vite允許我們自行設定，可以覆蓋Rollup和各種Rollup外掛的配置。
專案中繫結的工具越多，整體就會越脆弱。如果一個元件發生故障或引入了重大更改，則整個流程將中斷，我們必須再次深入研究每個工具和外掛及其複雜性，以對其進行修復，Vite從根本上減輕了開發的負擔。
總結
總而言之，Vite是對最近簡化工具（如Parcel和Snowpack）趨勢的補充。它精簡的設定幾乎就是外掛。
如果我們要使用前端框架，我們可能會選擇Nuxt，Next.js，SvelteKit / Sapper或類似的產品。這些工具不僅簡化了工具並加快了開發速度，而且還新增了許多複雜應用程式可能需要的外掛，非常方便易用。
而如果我們要避免使用框架，但又需要縮小指令碼和樣式，Vite將會成為首選工具。