由于這幾個(gè)月使用了Vue3 + TS + Vite進(jìn)行開發(fā)，并且是真的被Vite強(qiáng)力吸粉了！！！Vite最大的優(yōu)點(diǎn)就是：快！！！非常快！！！

說實(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í)快！！！

那到底是為什么Vite可以做到這么快呢？官方給的解釋，真的很官方。。所以今天我想用比較通俗易懂的話來講講，希望大家能看一遍就懂。

問題現(xiàn)狀

1.ES模塊化支持的問題

咱們都知道，以前的瀏覽器是不支持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 

你覺得這樣的一段代碼，放到瀏覽器能直接運(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

2.項(xiàng)目啟動(dòng)與代碼更新的問題

這個(gè)不用說，大家都懂：

• 項(xiàng)目啟動(dòng)：隨著項(xiàng)目越來越大，啟動(dòng)個(gè)項(xiàng)目可能要幾分鐘
• 代碼更新：隨著項(xiàng)目越來越大，修改一小段代碼，保存后都要等幾秒才更新

解決問題

1.解決啟動(dòng)項(xiàng)目緩慢

Vite在打包的時(shí)候，將模塊分成兩個(gè)區(qū)域依賴和源碼：

• 依賴：一般是那種在開發(fā)中不會(huì)改變的JavaScript，比如組件庫，或者一些較大的依賴（可能有上百個(gè)模塊的庫），這一部分使用esbuild來進(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，這使性能提高了很多，為什么呢？

咱們看下面兩張圖：

第一張圖，是以前的打包模式，就像之前舉的index.js、add.js、sub.js的例子，項(xiàng)目啟動(dòng)時(shí)，需要先將所有文件打包成一個(gè)文件bundle.js，然后在html引入，這個(gè)多文件 -> bundle.js的過程是非常耗時(shí)間的。

第二張圖，是Vite的打包方式，剛剛說了，Vite是直接把轉(zhuǎn)換后的es module的JavaScript代碼，扔給支持es module的瀏覽器，讓瀏覽器自己去加載依賴，也就是把壓力丟給了瀏覽器，從而達(dá)到了項(xiàng)目啟動(dòng)速度快的效果。

2.解決更新緩慢

剛剛說了，項(xiàng)目啟動(dòng)時(shí)，將模塊分成依賴和源碼，當(dāng)你更新代碼時(shí)，依賴就不需要重新加載，只需要精準(zhǔn)地找到是哪個(gè)源碼的文件更新了，更新相對(duì)應(yīng)的文件就行了。這樣做使得更新速度非常快。

Vite 同時(shí)利用 HTTP 頭來加速整個(gè)頁面的重新加載（再次讓瀏覽器為我們做更多事情）：源碼模塊的請(qǐng)求會(huì)根據(jù) 304 Not Modified 進(jìn)行協(xié)商緩存，而依賴模塊請(qǐng)求則會(huì)通過 Cache-Control: max-age=31536000,immutable 進(jìn)行強(qiáng)緩存，因此一旦被緩存它們將不需要再次請(qǐng)求。

生產(chǎn)環(huán)境

剛剛咱們說的都是開發(fā)環(huán)境，也說了，Vite在是直接把轉(zhuǎn)化后的es module的JavaScript，扔給瀏覽器，讓瀏覽器根據(jù)依賴關(guān)系，自己去加載依賴。

那有人就會(huì)說了，那放到生產(chǎn)環(huán)境時(shí)，是不是可以不打包，直接在開個(gè)Vite服務(wù)就行，反正瀏覽器會(huì)自己去根據(jù)依賴關(guān)系去自己加載依賴。答案是不行的，為啥呢：

• 你代碼是放在服務(wù)器的，過多的瀏覽器加載依賴肯定會(huì)引起更多的網(wǎng)絡(luò)請(qǐng)求
• 為了在生產(chǎn)環(huán)境中獲得最佳的加載性能，最好還是將代碼進(jìn)行tree-shaking、懶加載和 chunk 分割、CSS處理，這些優(yōu)化操作，目前esbuild還不怎么完善

所以Vite最后的打包是使用了Rollup。