轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文參考：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將會成為首選工具。
拓展閱讀
Vue3究竟有什么魔力，想了解更詳細的內容不妨跟着實戰教程，親自搭建一個基於Vue3的表格編輯系統。