Vite 和 Vue3 在 2022 年應(yīng)該不算個新事物了廓八，但應(yīng)該也有很多像我一樣還沒有接觸過這兩個 “新鮮玩意” 的奉芦。
這兩樣（Vite + Vue3）給我的感覺是完完全全的新鮮玩具，是新時代的潮流剧蹂。
看著手里的 webpack + Vue2声功，想著會不會像幾年前的 angularjs + gulp 一樣，成為歷史国夜。
臨近年關(guān)减噪，也有了一些閑暇時間，來認識一下被人安利多次的新型前端構(gòu)建工具 Vite + 全新升級的 Vue3 吧车吹！
從 Vite 開始
先來看看 Vite 的官方介紹吧。
可以看出醋闭，在本地開發(fā)時窄驹，Vite 使用了 原生 ES 模塊：現(xiàn)代瀏覽器（比如最新版谷歌）已經(jīng)不需要依賴 webpack 管理包模塊，而是可以和 Nodejs 一樣具有模塊管理能力证逻，這就是 原生 ES 模塊 能力乐埠。
所以，在本地開發(fā)時囚企，Vite 省略了一些耗時的編譯過程丈咐，熱更新自然快。
在構(gòu)建生產(chǎn)產(chǎn)物時龙宏，可以構(gòu)建現(xiàn)代瀏覽器產(chǎn)物棵逊，也可以通過 Rollup 輸出生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源∫铮—— 這個高度優(yōu)化到什么程度辆影，我們可以在后面的文章里去探討一下。
上手
Vite 的上手使用很簡單黍特，直接運行 npm create vite@latest 命令即可蛙讥。
npm create其實就是npm init命令，而npm init命令帶上包名執(zhí)行的就是npm exec灭衷，也就是執(zhí)行vite包的默認命令 ——初始化次慢。
輸入命令后，需要添加項目名稱和技術(shù)棧，可以看到可供選擇的技術(shù)棧有這么幾種（如下圖）
vite 支持的框架有 6 種迫像，有一半我都不認識拭抬。
-
vanilla：Vanilla JS 是一個快速、輕量級侵蒙、跨平臺的JavaScript框架造虎。Vanilla JS 是世界上最輕量的JavaScript框架（沒有之一） —— 其實這玩意就是原生 JS。 -
vue/react：這兩個應(yīng)該不用過多介紹了吧纷闺。 -
preact：React 的輕量級替代方案算凿。 -
lit：Lit 是一個簡單的庫，用于構(gòu)建快速犁功、輕量級的 Web 組件氓轰。（看了一眼語法，感覺還挺好玩的浸卦。） -
svelte：一個不使用Virtual DOM的庫 —— 真酷膳犹。這個庫的作者和Rollup的作者是同一人。
這里我選了 vue + ts 進行創(chuàng)建策彤。
現(xiàn)在來看看褪贵，這個新建的項目目錄長啥樣吧。（如下圖）
和用 vue-cli 初始化的目錄有兩處不同：
-
index.html入口文件被移到了根目錄下怒医。官方解釋是：在開發(fā)期間 Vite 是一個服務(wù)器炉抒，而index.html是該 Vite 項目的入口文件。 -
vite.config.ts替代了vue.config.js稚叹，作為vite項目的配置文件焰薄。
接下來，我們看看 package.json 的內(nèi)容吧扒袖。（如下）
{
"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 的版本已經(jīng)是最新的 Vue3 了季率。而開發(fā)時依賴也從 vue-cli/webpack 系列切換到了 vite 系列野瘦。
啟動項目
在體驗 Vue3 新語法之前，先把項目啟動蚀同，看看效果吧缅刽。
在使用 npm i 安裝完依賴后，使用 npm run dev 即可啟動 本地開發(fā) 模式了蠢络。
剛運行項目衰猛，啟動速度著實讓我吃了一驚。
這比 Vue2 初始化的項目啟動也快太多了刹孔，剛一眨眼項目就已經(jīng)啟動了啡省。
當然娜睛，我們從它的介紹可以得知，這是因為在本地開發(fā)時卦睹，Vite 使用了 原生 ES 模塊畦戒，所以期間沒有涉及模塊編譯過程，節(jié)約了不少時間结序。
查看本地運行的模塊
我們打開控制臺障斋，先看看我們的 html 文件。（如下圖）
從上午可以看出徐鹤，html 中引入了 main.ts垃环，也就是我們這個項目的入口文件。（如下圖）
從上面這張圖可以看出返敬，代碼還是原生的 import遂庄，沒有經(jīng)過任何轉(zhuǎn)譯。
但是劲赠，在這里我看到請求的資源涛目，有 ts 還有 vue。
難道谷歌瀏覽器已經(jīng)支持直接加載 ts 和 vue 文件了嗎凛澎？其實并不是霹肝，這里的奧妙之處來自于文件的響應(yīng)頭 —— Content-Type，這決定了瀏覽器以什么樣的方式處理該文件预厌。（如下圖）
如果你點開其他 .vue 文件可以看出阿迈，.vue 文件還是經(jīng)過編譯，成為了可供瀏覽器識別的 js 類型轧叽，但模塊還是使用了谷歌瀏覽器支持的 原生 ES 模塊。（如下圖）
我們來看看頁面長啥樣吧刊棕。（如下圖）
emmmmm炭晒，經(jīng)典的 Vue 啟動頁。
上圖的兩行話引起了我的注意：
- 推薦使用的 IDE 是
vscode+volar甥角。 - 修改
components/HelloWorld.vue來測試本地熱更新功能网严。
vscode + volar
vscode 是我一直用于寫 vue 的代碼編輯器，可 volar 是啥呢嗤无？
查了一下震束，原來是 vscode 中用于支持 vue3 語法的一個插件，可以用于智能語法提示和錯誤檢查当犯。（如下圖）
果斷安裝一波垢村。—— 學霸一把梭嚎卫，差生文具多
文檔中提到了嘉栓，該插件可能會和 vetur 插件有沖突，建議兩者只開啟一個。（確實如此）侵佃，所以在一個工作區(qū)內(nèi)的話麻昼，只開一個插件吧，避免沖突馋辈。
本地熱更新
接下來抚芦，我來修改 components/HelloWorld.vue 測試一下本地熱更新功能。
其實感覺不用試迈螟，速度肯定很快叉抡。
修改代碼后，保存的一瞬間就熱更新完成了井联，幾乎是感覺不到的卜壕。
這跟項目小也有關(guān)系，對于比較大的項目烙常，修改代碼以后轴捎，熱更新的速度如何，還需要再驗證蚕脏。
構(gòu)建項目
本地開發(fā)已經(jīng)體驗過了侦副，現(xiàn)在來構(gòu)建項目試試吧，看看產(chǎn)物長啥樣驼鞭。
使用 npm run build 命令可以構(gòu)建項目秦驯。這里發(fā)現(xiàn)有個報錯。（如下圖）
我這是剛初始化的項目挣棕，怎么第一次構(gòu)建就報錯了呢译隘？
這里看出報錯是 可選鏈操作符 語法的報錯，想了一下應(yīng)該是 node 版本的問題洛心。我本地的 node 版本是 v12.20.0固耘，在官方文檔找了找，確實有相關(guān)的問題記錄词身。（如下圖）
看來 vue + ts 的模板依賴的 node 版本需要更高厅目，我這里將 node 版本切換到 v14.15.0，再次運行構(gòu)建命令法严，就成功啦Ｋ鸱蟆（如下圖）
最終構(gòu)建的代碼是由 Rollup 進行打包的，Rollup 其實我也沒用過深啤，還是看看他的官方介紹吧拗馒。
這里主要還是了解一下 rollup 和 webpack 的區(qū)別，rollup 的模塊打包能力并沒有 webpack 強大墓塌，但是利用了 tree-shaking 充分處理 js 文件瘟忱，打包出來的 js 文件會比較 “干凈”奥额。
然后，我們進入 dist 目錄访诱，使用 anywhere（一個簡單的 http 服務(wù)器） 運行一下項目看看垫挨。
從上圖可以看出，vite 打包出來的文件触菜，入口 js 是直接阻塞 DOM 渲染線程的九榔。不過，這兩個 js 的文件也不大涡相，加起來才 53k哲泊。
當然，隨著項目越來越大催蝗，這個體積也會越來越大的切威。
Vite 兼容性問題
一個新框架的推出，大家都比較關(guān)心它的社區(qū)活躍度丙号，其次就是它的兼容性了先朦。
我們來看看 Vite 打包出來的代碼兼容性如何吧。（如下圖）
據(jù) Vite 官方介紹犬缨，默認配置構(gòu)建出來的代碼是只能支持現(xiàn)代瀏覽器的喳魏，也就是下面這些。
可以通過修改配置最低支持到 es2015怀薛，也就是 ES6 （也就是說刺彩，IE 不支持）。
但是可以通過一個插件 —— @vitejs/plugin-legacy 來支持傳統(tǒng)瀏覽器（比如 IE11）枝恋。不過创倔，IE11 好像也就是它的極限了，更低的版本可能會出現(xiàn)問題焚碌。
所以三幻，如果你對于瀏覽器兼容要求比較嚴格的話，請謹慎使用 Vite呐能。
小結(jié)
好了，到這里抑堡，這次 Vite 的初體驗摆出，到這里就結(jié)束了。
用 Vite 新建一個項目首妖，然后修改代碼偎漫，查看變更。最后有缆，構(gòu)建項目象踊，本地預(yù)覽温亲。
這一切用 Vite 來做還是比較簡單的，而且 很快杯矩！
我想栈虚，我會開始嘗試用 Vite + Vue3 去寫一些小項目練手，然后再看看有沒有適合它的生產(chǎn)項目史隆。
下次我再來聊聊我使用 Vue3 的初體驗魂务，歡迎大家持續(xù)關(guān)注。
最后一件事
如果您已經(jīng)看到這里了泌射，希望您還是點個贊再走吧~
您的點贊是對作者的最大鼓勵粘姜，也可以讓更多人看到本篇文章！
如果覺得本文對您有幫助熔酷，請幫忙在 github 上點亮 star 鼓勵一下吧孤紧！
