什么，你還使用Webpack？別人都在用Vite搭建項(xiàng)目了
一、vite 到底是干嘛的?
vite 實(shí)際上就是一個(gè)面向現(xiàn)代瀏覽器，基于 ES module 實(shí)現(xiàn)了一個(gè)更輕快的項(xiàng)目構(gòu)建打包工具。
vite 是法語(yǔ)中輕快的意思。
vite 的特點(diǎn)：
1、輕快的冷服務(wù)啟動(dòng)。vite 是面向現(xiàn)代瀏覽器的，瀏覽器支持 ES6 的 imports屬性，利用瀏覽器解析 imports，在服務(wù)端按需編譯返回，不進(jìn)行打包。所以運(yùn)行速度較快。
2、開發(fā)中的熱更新。監(jiān)聽項(xiàng)目代碼，有改動(dòng)時(shí)，會(huì)立即重新運(yùn)行。
3、按需進(jìn)行編譯，不會(huì)刷新全部的DOM。vite只需要在瀏覽器請(qǐng)求源碼時(shí)進(jìn)行轉(zhuǎn)換并按需提供源碼。根據(jù)情景動(dòng)態(tài)導(dǎo)入代碼，只有在當(dāng)前屏幕實(shí)際使用時(shí)才會(huì)被處理。
vite 對(duì)現(xiàn)代的瀏覽器支持性比較好，傳統(tǒng)的瀏覽器可以通過官方提供的 @vite/plugin-legacy 插件支持。
二、vite 創(chuàng)建 vue 項(xiàng)目
vite 是構(gòu)建工具的高階封裝，它的內(nèi)部其實(shí)是 Rollup。
vite 是尤雨溪隨著vue3正式版一起發(fā)布的一個(gè)工具，所以 vite 只提供了 vue3 的項(xiàng)目搭建方法，沒有 vue2.0 搭建方式。除了能夠搭建 vue3 項(xiàng)目之外，還能搭建 vue-ts、react 、react-ts、preact、preact-ts、vanilla、vanilla-ts、lit、svelte。
2.1、手把手教你搭建 vite 項(xiàng)目
打開命令行工具，使用npm命令：
- npm init vite@lasted
運(yùn)行結(jié)果，如圖：
輸入需要?jiǎng)?chuàng)建的項(xiàng)目名“ learn_vite ”，如果不輸入，默認(rèn)是 “ vite-project ” 。
回車進(jìn)行下一步，需要選擇創(chuàng)建項(xiàng)目的類型，如圖：
使用上下箭頭切換，選擇我們最熟悉的 vue ，回車進(jìn)行下一步。
進(jìn)行選擇是否為 ts? vite 原生支持 ts 。我們直接選擇vue。不要 ts。
此時(shí)，項(xiàng)目創(chuàng)建完成了，需要進(jìn)入項(xiàng)目，安裝依賴，就可以啟動(dòng)服務(wù)了。
根據(jù)提示地址，去訪問我們剛剛創(chuàng)建的第一個(gè)項(xiàng)目。如圖所示。
2.2、 vite創(chuàng)建文件目錄
創(chuàng)建好項(xiàng)目之后，使用編輯器打開項(xiàng)目，我們可以看到項(xiàng)目結(jié)構(gòu)如圖：
學(xué)習(xí)vite是如何運(yùn)行項(xiàng)目的，首先從配置文件入手。打開package.json文件，代碼如下：
- {
- "name": "learn_vite",
- "version": "0.0.0",
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "serve": "vite preview"
- },
- "dependencies": {
- "vue": "^3.2.16"
- },
- "devDependencies": {
- "@vitejs/plugin-vue": "^1.9.3",
- "vite": "^2.6.4"
- }
- }
找到啟動(dòng)項(xiàng)目的命令，以及打包命令。
三、vite VS webpack
3.1、vite 速度快有多快?
我們創(chuàng)建兩個(gè)項(xiàng)目，一個(gè)使用 vite ，另一個(gè)使用 webpack 。創(chuàng)建完成之后，啟動(dòng)服務(wù)，對(duì)比啟動(dòng)時(shí)間，我們就知道 vite 有多快了。
啟動(dòng)服務(wù)時(shí)，webpack 需要先打包項(xiàng)目，打包之后再啟動(dòng)項(xiàng)目，但是 vite 完全跳過了打包這個(gè)概念，服務(wù)器隨起隨用。所以在啟動(dòng)服務(wù)時(shí)，vite 比 webpack 的速度快多了。
3.2、vite 熱更新效率有多高?
一些打包器的開發(fā)服務(wù)器將構(gòu)建內(nèi)容存入內(nèi)存，這樣它們只需要在文件更改時(shí)，使模塊圖的一部分失活，但它也需要整個(gè)重新構(gòu)建并重新載入頁(yè)面。這樣代價(jià)很高，重新加載頁(yè)面會(huì)失去應(yīng)用的當(dāng)前狀態(tài)。所以 vite 支持了動(dòng)態(tài)模塊熱加載(HMR)，也就是允許一個(gè)模塊“熱替換”自己，對(duì)頁(yè)面的其他部分沒有影響，也就是只替換更新了一部分有改變的元素，所以大大改進(jìn)了開發(fā)體驗(yàn)。
vite 同時(shí)還利用 http 頭加速整個(gè)頁(yè)面的加載，依賴模塊請(qǐng)求會(huì)通過 Cache-Control:max-age=31536000，immutable 進(jìn)行強(qiáng)緩存，再次請(qǐng)求的時(shí)候，緩存的內(nèi)容就不需要再次請(qǐng)求。
3.3、使用語(yǔ)言不同
webpack 使用的是 node.js 去實(shí)現(xiàn)的，而 vite 使用的是esbuild預(yù)構(gòu)建依賴。而es build使用Go編寫的，比 node.js 編寫的打包器預(yù)構(gòu)建依賴快 10-100 倍。
上邊說這么多，凈夸 vite 有多優(yōu)秀了，難道 vite 就是這么強(qiáng)大，沒有什么缺點(diǎn)嗎?
四、vite 局限
vite 與webpack 相比，畢竟出道時(shí)間有點(diǎn)短，它的生態(tài)還不是不完善。webpack最牛之處就在于 loader 和 plugin 非常豐富。
vite 打包項(xiàng)目時(shí)，目前使用的是 Rollup，對(duì) CSS和代碼分割不是很友好。
vite 剛興起不久，生態(tài)系統(tǒng)還不夠完善，建議大家在創(chuàng)建工作項(xiàng)目的時(shí)候還是使用 webpack 。自己的項(xiàng)目可以使用 vite 。
