Vite為什么快呢？快在哪？說(shuō)一下我自己的理解吧
前言
由于這幾個(gè)月使用了?Vue3 + TS + Vite?進(jìn)行開發(fā)，并且是真的被?Vite?強(qiáng)力吸粉了?。?！Vite最大的優(yōu)點(diǎn)就是：快?。?！非?？欤。?！
說(shuō)實(shí)話，使用?Vite?開發(fā)之后，我都有點(diǎn)不想回到以前?Webpack?的項(xiàng)目開發(fā)了，因?yàn)橹暗捻?xiàng)目啟動(dòng)項(xiàng)目需要?30s?以上，修改代碼更新也需要?2s?以上，但是現(xiàn)在使用?Vite?，差不多啟動(dòng)項(xiàng)目只需要?1s?，而修改代碼更新也是超級(jí)快?。。?/span>
那到底是為什么?Vite?可以做到這么快呢？官方給的解釋，真的很官方。。所以今天我想用比較通俗易懂的話來(lái)講講，希望大家能看一遍就懂。
問(wèn)題現(xiàn)狀
ES模塊化支持的問(wèn)題
咱們都知道，以前的瀏覽器是不支持?ES module?的，比如：
//?index.js
import?{?add?}?from?'./add.js'
import?{?sub?}?from?'./sub.js'
console.log(add(1,?2))
console.log(sub(1,?2))
//?add.js
export?const?add?=?(a,?b)?=>?a?+?b?
//?sub.js
export?const?sub?=?(a,?b)?=>?a?-?b?
你覺(jué)得這樣的一段代碼，放到瀏覽器能直接運(yùn)行嗎？答案是不行的哦。那怎么解決呢？這時(shí)候打包工具出場(chǎng)了，他將?index.js、add.js、sub.js?這三個(gè)文件打包在一個(gè)?bundle.js?文件里，然后在項(xiàng)目?index.html?中直接引入?bundle.js?，從而達(dá)到代碼效果。一些打包工具，都是這么做的，例如?webpack、Rollup、Parcel
項(xiàng)目啟動(dòng)與代碼更新的問(wèn)題
這個(gè)不用說(shuō)，大家都懂：
項(xiàng)目啟動(dòng)：隨著項(xiàng)目越來(lái)越大，啟動(dòng)個(gè)項(xiàng)目可能要幾分鐘
代碼更新：隨著項(xiàng)目越來(lái)越大，修改一小段代碼，保存后都要等幾秒才更新
解決問(wèn)題
解決啟動(dòng)項(xiàng)目緩慢
依賴?：一般是那種在開發(fā)中不會(huì)改變的JavaScript，比如組件庫(kù)，或者一些較大的依賴（可能有上百個(gè)模塊的庫(kù)），這一部分使用?esbuild?來(lái)進(jìn)行?預(yù)構(gòu)建依賴?,?esbuild?使用的是 Go 進(jìn)行編寫，比 JavaScript 編寫的打包器預(yù)構(gòu)建依賴快 10-100倍
源碼?：一般是哪種好修改幾率比較大的文件，例如?JSX、CSS、vue?這些需要轉(zhuǎn)換且時(shí)常會(huì)被修改編輯的文件。同時(shí)，這些文件并不是一股腦全部加載，而是可以按需加載（例如路由懶加載）。?Vite?會(huì)將文件轉(zhuǎn)換后，以?es module?的方式直接交給瀏覽器，因?yàn)楝F(xiàn)在的瀏覽器大多數(shù)都直接支持?es module?，這使性能提高了很多，為什么呢？咱們看下面兩張圖：
解決更新緩慢
生產(chǎn)環(huán)境
1、你代碼是放在服務(wù)器的，過(guò)多的瀏覽器加載依賴肯定會(huì)引起更多的網(wǎng)絡(luò)請(qǐng)求
2、為了在生產(chǎn)環(huán)境中獲得最佳的加載性能，最好還是將代碼進(jìn)行?tree-shaking、懶加載和 chunk 分割、CSS處理，這些優(yōu)化操作，目前?esbuild?還不怎么完善
最后
如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：
點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。
