iT邦幫忙

2021 iThome 鐵人賽

DAY 5
6
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 5

Day_05 : 讓 Vite 來開啟你的Vue 之 前進Vite

Hi Dai Gei Ho~ 我是Winnie,終於今天來到了第五天,明天也要放假了!

在接下來幾篇文章也將開始進入 Vite 的主題,其中此篇文章主要會針對 Vite家庭背景 來做介紹。

Vite

Vite 主要是由 Vue之父 尤雨溪 所創建的 新型前端建構工具,其中取名為 Vite的主要原因 是因為 在法語的單字中有『快速』的意思,就如同他的開發速度一樣快 (注意是念Vite不是Vite喔XD) 。

而在現今 的 前端建開發工具中,許多主流框架也都發展出屬於自己的專案建構工具,例如:Vue 的vue-cli,React 的 create-react-app 等,其中大多都是採用 Webpack 來進行打包 的。

到這邊你可能會想 既然 Webpack這麼好用? 為何 尤雨溪大大 要再 創建一個Vite 來 打自己的 Vue-cli啊?

事情是這樣的~在昨天的文章中 我們有提到 webpack是 採用 Module bundler 的方式進行打包,但好像忘記提到在Webpack中還有一個特點,就是他們有自己的dev-server(本地伺服器),而dev-server(本地伺服器)主要目的是在開發時可以自動檢測程式碼的變更來更新畫面,(如上圖)其運作過程也是先從 進入點(entry point)分析引入的模組所產生依賴圖 進行打包結束後才會啟動Server,一旦程式碼修改,Webpack 的熱更新(HMR)會再次以修改的 進入點(entry point)** 進行打包,同時所有相關的依賴也都會重新被加載一次。於是這樣就會產生兩個缺點,當專案越來越大時,開發的時間難免就會變長,同時也就會造成開發體驗變慢。

就像 你知道當等待時間一變長,不知道為何你就會想躺下來。(如上圖)

而 Vite的出現 剛好就解决了上述開發速度的問題。

Vite dev-server原理:

與Webpack的不同,Vite也有自己的dev-server,同時利用 瀏覽器支援Native ESM 進行運作。

 //main.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="w-full" id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

 //main.js

  import { createApp } from 'vue'
  import App from './App.vue'

  createApp(App).mount('#app')

就如同以上程式碼與圖,其運作方式是,Vite也會在 本地 啟動一個dev-server(本地伺服器),當瀏覽器在Html檔中讀取到<script type="module" src="/src/main.js">後,會針對路main.js中有 importApp.vue的模組 向伺服器發送請求,同時Vite利用內部的黑魔法 會開始將 瀏覽器看不懂的程式碼(如Vue)進行轉譯壓縮成一支Js檔。

而這樣的運作模式的好處在於 即使沒有對專案進行傳統打包,Vite也可以透過 瀏覽器 對Native ESM的支援,根據 Http的request 來載入模組進行處理,實現真正的依需求加載。讓開發速度變得更快,人生也會變得美好

附上 瀏覽器版本 對 Native ESM 的 支援度圖,從上圖我們可以看到現在大多瀏覽器都支援了Native ESM,除了...(這圖真好用

另外Vite對於 熱更新(HMR)運作方式是透過 webSocket/Chokidar/esbuild(後期文章會再拉出來解釋)即時編譯修改的程式碼,並透過暫存機制加載來更新後的內容。

最後總結以上為何Vite可以這麼快的原因在於,他實踐了快速冷啟動 依照需求編譯 模組熱更新的三大特點,來改善了過去傳統打包的問題。

速度實際測試

好了以上解釋了這麼多,我們都還沒看過Vite到底多麽快速,以下動圖是之前在 Twitter上引發了熱烈討論,而其內容主要是在比較 Vite創建 React專案React 的 create-react-app 建立專案時的速度差異。在下方動圖我們可以看到 右邊的Vite 只要輸入幾個指令碼 就將專案建好了,而左邊還在進行建立。(看到這,是不是覺得有點神奇!我也覺得神奇,而且從六月用到現在 已經回不去了XD)

嘗試來 開啟你 的 Vite 吧

最後,那Vite要怎麼安裝?開點小玩笑~

第一步起手式,輸入指令 npm 與yarn擇一輸入

//npm 

$ npm init vite@latest
//yarn 

$ yarn create vite

再來請輸入 專案名稱選擇你想使用的框架


順帶一提這邊也是我對尤雨溪大大 感到非常敬佩的地方,因為Vite不僅只是支援 Vue、原生JS,甚至是React也都支援。(有一種 雖然我們是競爭工具,但我還是接納你的感覺XD)

接著等待不用1.5秒時間,專案建立完成,依照下列步驟開啟專案 即完成

cd 你的專案名稱
yarn                //初始化你的專案
yarn dev            //開啟 dev server

以上是今天的文章,不曉得大家有沒有體會到Vite的快速了,如果覺得有 恭喜你與美好人生又近一步了XD,謝謝大家的閱讀,如有錯誤地方歡迎各位的指教。


上一篇
Day_04 : 讓 Vite 來開啟你的Vue_ Module Bundler
下一篇
Day_06 : 讓 Vite 來開啟你的Vue 之 Production Build
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
照燒
iT邦新手 4 級 ‧ 2023-02-23 17:34:54

Vite缺點功能是不健全,有很多功能還是回頭用webpack,
如果很複雜,最終還是用傳統CLI比較好,
而且推這麼久了,Vite星星數只有1.9k,比很多簡單chrome extension小工具star還少,
如果CLI沒有繼續維護,我想大多數人應該會回頭用React。

Leochiu iT邦新手 5 級 ‧ 2023-06-04 14:33:03 檢舉

Vite 的星星數沒有那麼少,現在已經是是 56K 了
https://github.com/vitejs/vite

我要留言

立即登入留言