Vite 和 Vue3 在 2022 年應該不算個新事物了，但應該也有很多像我一樣還沒有接觸過這兩個 “新鮮玩意” 的。
這兩樣（Vite + Vue3）給我的感覺是完完全全的新鮮玩具，是新時代的潮流。
看著手裡的 webpack + Vue2，想著會不會像幾年前的 angularjs + gulp 一樣，成為歷史。
臨近年關，也有了一些閒暇時間，來認識一下被人安利多次的新型前端構建工具 Vite + 全新升級的 Vue3 吧！
從 Vite 開始
先來看看 Vite 的官方介紹吧。
可以看出，在本地開發時，Vite 使用了 原生 ES 模組：現代瀏覽器（比如最新版谷歌）已經不需要依賴 webpack 管理包模組，而是可以和 Nodejs 一樣具有模組管理能力，這就是 原生 ES 模組 能力。
所以，在本地開發時，Vite 省略了一些耗時的編譯過程，熱更新自然快。
在構建生產產物時，可以構建現代瀏覽器產物，也可以通過 Rollup 輸出生產環境的高度優化過的靜態資源。—— 這個高度優化到什麼程度，我們可以在後面的文章裡去探討一下。
上手
Vite 的上手使用很簡單，直接執行 npm create vite@latest 命令即可。
npm create其實就是npm init命令，而npm init命令帶上包名執行的就是npm exec，也就是執行vite包的預設命令 ——初始化。
輸入命令後，需要新增專案名稱和技術棧，可以看到可供選擇的技術棧有這麼幾種（如下圖）
vite 支援的框架有 6 種，有一半我都不認識。
vanilla：Vanilla JS 是一個快速、輕量級、跨平臺的JavaScript框架。Vanilla JS 是世界上最輕量的JavaScript框架（沒有之一） —— 其實這玩意就是原生 JS。vue/react：這兩個應該不用過多介紹了吧。preact：React 的輕量級替代方案。lit：Lit 是一個簡單的庫，用於構建快速、輕量級的 Web 元件。（看了一眼語法，感覺還挺好玩的。）svelte：一個不使用Virtual DOM的庫 —— 真酷。這個庫的作者和Rollup的作者是同一人。
這裡我選了 vue + ts 進行建立。
現在來看看，這個新建的專案目錄長啥樣吧。（如下圖）
和用 vue-cli 初始化的目錄有兩處不同：
index.html入口檔案被移到了根目錄下。官方解釋是：在開發期間 Vite 是一個伺服器，而index.html是該 Vite 專案的入口檔案。vite.config.ts替代了vue.config.js，作為vite專案的配置檔案。
接下來，我們看看 package.json 的內容吧。（如下）
{
"name": "vite-try",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
}
}從上面可以看出，使用 Vite 初始化的 Vue 專案，Vue 的版本已經是最新的 Vue3 了。而開發時依賴也從 vue-cli/webpack 系列切換到了 vite 系列。
啟動專案
在體驗 Vue3 新語法之前，先把專案啟動，看看效果吧。
在使用 npm i 安裝完依賴後，使用 npm run dev 即可啟動 本地開發 模式了。
剛執行專案，啟動速度著實讓我吃了一驚。
這比 Vue2 初始化的專案啟動也快太多了，剛一眨眼專案就已經啟動了。
當然，我們從它的介紹可以得知，這是因為在本地開發時，Vite 使用了 原生 ES 模組，所以期間沒有涉及模組編譯過程，節約了不少時間。
檢視本地執行的模組
我們開啟控制檯，先看看我們的 html 檔案。（如下圖）
從上午可以看出，html 中引入了 main.ts，也就是我們這個專案的入口檔案。（如下圖）
從上面這張圖可以看出，程式碼還是原生的 import，沒有經過任何轉譯。
但是，在這裡我看到請求的資源，有 ts 還有 vue。
難道谷歌瀏覽器已經支援直接載入 ts 和 vue 檔案了嗎？其實並不是，這裡的奧妙之處來自於檔案的響應頭 —— Content-Type，這決定了瀏覽器以什麼樣的方式處理該檔案。（如下圖）
如果你點開其他 .vue 檔案可以看出，.vue 檔案還是經過編譯，成為了可供瀏覽器識別的 js 型別，但模組還是使用了谷歌瀏覽器支援的 原生 ES 模組。（如下圖）
我們來看看頁面長啥樣吧。（如下圖）
emmmmm，經典的 Vue 啟動頁。
上圖的兩行話引起了我的注意：
- 推薦使用的 IDE 是
vscode+volar。 - 修改
components/HelloWorld.vue來測試本地熱更新功能。
vscode + volar
vscode 是我一直用於寫 vue 的程式碼編輯器，可 volar 是啥呢？
查了一下，原來是 vscode 中用於支援 vue3 語法的一個外掛，可以用於智慧語法提示和錯誤檢查。（如下圖）
果斷安裝一波。—— 學霸一把梭，差生文具多
文件中提到了，該外掛可能會和 vetur 外掛有衝突，建議兩者只開啟一個。（確實如此），所以在一個工作區內的話，只開一個外掛吧，避免衝突。
本地熱更新
接下來，我來修改 components/HelloWorld.vue 測試一下本地熱更新功能。
其實感覺不用試，速度肯定很快。
修改程式碼後，儲存的一瞬間就熱更新完成了，幾乎是感覺不到的。
這跟專案小也有關係，對於比較大的專案，修改程式碼以後，熱更新的速度如何，還需要再驗證。
構建專案
本地開發已經體驗過了，現在來構建專案試試吧，看看產物長啥樣。
使用 npm run build 命令可以構建專案。這裡發現有個報錯。（如下圖）
我這是剛初始化的專案，怎麼第一次構建就報錯了呢？
這裡看出報錯是 可選鏈操作符 語法的報錯，想了一下應該是 node 版本的問題。我本地的 node 版本是 v12.20.0，在官方文件找了找，確實有相關的問題記錄。（如下圖）
看來 vue + ts 的模板依賴的 node 版本需要更高，我這裡將 node 版本切換到 v14.15.0，再次執行構建命令，就成功啦！（如下圖）
最終構建的程式碼是由 Rollup 進行打包的，Rollup 其實我也沒用過，還是看看他的官方介紹吧。
這裡主要還是瞭解一下 rollup 和 webpack 的區別，rollup 的模組打包能力並沒有 webpack 強大，但是利用了 tree-shaking 充分處理 js 檔案，打包出來的 js 檔案會比較 “乾淨”。
然後，我們進入 dist 目錄，使用 anywhere（一個簡單的 http 伺服器） 執行一下專案看看。
從上圖可以看出，vite 打包出來的檔案，入口 js 是直接阻塞 DOM 渲染執行緒的。不過，這兩個 js 的檔案也不大，加起來才 53k。
當然，隨著專案越來越大，這個體積也會越來越大的。
Vite 相容性問題
一個新框架的推出，大家都比較關心它的社群活躍度，其次就是它的相容性了。
我們來看看 Vite 打包出來的程式碼相容性如何吧。（如下圖）
據 Vite 官方介紹，預設配置構建出來的程式碼是隻能支援現代瀏覽器的，也就是下面這些。
可以通過修改配置最低支援到 es2015，也就是 ES6 （也就是說，IE 不支援）。
但是可以通過一個外掛 —— @vitejs/plugin-legacy 來支援傳統瀏覽器（比如 IE11）。不過，IE11 好像也就是它的極限了，更低的版本可能會出現問題。
所以，如果你對於瀏覽器相容要求比較嚴格的話，請謹慎使用 Vite。
小結
好了，到這裡，這次 Vite 的初體驗，到這裡就結束了。
用 Vite 新建一個專案，然後修改程式碼，檢視變更。最後，構建專案，本地預覽。
這一切用 Vite 來做還是比較簡單的，而且 很快！
我想，我會開始嘗試用 Vite + Vue3 去寫一些小專案練手，然後再看看有沒有適合它的生產專案。
下次我再來聊聊我使用 Vue3 的初體驗，歡迎大家持續關注。
最後一件事
如果您已經看到這裡了，希望您還是點個贊再走吧~
您的點贊是對作者的最大鼓勵，也可以讓更多人看到本篇文章！
如果覺得本文對您有幫助，請幫忙在 github 上點亮 star 鼓勵一下吧！