輕量級工具Vite到底牛在哪, 一文全知道

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

時下大熱的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/back...

按照說明進行操做以後，Vite會產生一個清單文件，其中包含有關全部產生的捆綁軟件的信息。並能夠讀取此文件的CSS和JavaScript捆綁包，生成<link>和<script>標籤。全部import都捆綁到中main.js，而全部動態import import('path/to/file.js')都單獨捆綁。

表現

爲何選擇Vite（https://vitejs.dev/guide/why....
通過一些測試，給人留下了深入的印象是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將會成爲首選工具。

拓展閱讀

若是您好奇Vite究竟有什麼魔力？不妨讓咱們經過實際搭建一款基於Vue 3組件的表格編輯系統，親自體驗一把。

• 支持 Vue 框架的純前端表格控件 SpreadJS