Vite 2.0 原理解析

為什么要有 Vite？

在瀏覽器支持 ES 模塊之前，開發(fā)者沒(méi)有以模塊化的方式開發(fā) JavaScript 的原生機(jī)制。這也是 “打包” 這個(gè)概念出現(xiàn)的原因：使用工具抓取、處理和鏈接我們的源碼模塊到文件中，使其可以運(yùn)行在瀏覽器中。

當(dāng)我們開始構(gòu)建越來(lái)越大型的應(yīng)用時(shí)，需要處理的 JavaScript 代碼量也呈指數(shù)級(jí)增長(zhǎng)。大型項(xiàng)目包含數(shù)千個(gè)模塊的情況并不少見。我們開始遇到性能瓶頸 —— 使用 JavaScript 開發(fā)的工具通常需要很長(zhǎng)時(shí)間（甚至是幾分鐘?。┎拍軉?dòng)開發(fā)服務(wù)器，即使使用 HMR，文件修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來(lái)。如此循環(huán)往復(fù)，遲鈍的反饋會(huì)極大地影響開發(fā)者的開發(fā)效率和幸福感。

 

而 Vite 的出現(xiàn)就是為了解決上述問(wèn)題。

• 服務(wù)器
  

Vite 只啟動(dòng)一臺(tái)靜態(tài)頁(yè)面的服務(wù)器，對(duì)文件代碼不打包，服務(wù)器會(huì)根據(jù)客戶端的請(qǐng)求，加載不同的模塊處理，實(shí)現(xiàn)真正的按需加載。

 

• HMR 熱更新

Webpack 的熱更新會(huì)以當(dāng)前修改的文件為入口重新 build 打包，所有涉及到的依賴也都會(huì)被重新加載一次。

 

Vite 采用立即編譯當(dāng)前修改的文件，同時(shí) vite 還會(huì)使用緩存機(jī)制( http緩存 => vite內(nèi)置緩存 )，加載更新后的文件內(nèi)容。

 

 

總結(jié)

總而言之，Vite 具有快速冷啟動(dòng)、按需編譯、模塊熱更新的特點(diǎn)。

綜上所述，vite 構(gòu)建項(xiàng)目與 vue-cli 構(gòu)建的項(xiàng)目在開發(fā)模式下還是有比較大的區(qū)別：

1、Vite 在開發(fā)模式下不需要打包可以直接運(yùn)行，使用的是 ES6 的模塊化加載規(guī)則；Vue-CLI 開發(fā)模式下必須對(duì)項(xiàng)目打包才可以運(yùn)行。

2、Vite 基于緩存的熱更新，Vue-CLI 基于 Webpack 的熱更新。

推薦閱讀：

前端為什么需要打包工具？

前端工程化中的重要環(huán)節(jié)——自動(dòng)化構(gòu)建

前端工程化到底是什么？

原理解析：如何實(shí)現(xiàn)自己的腳手架工具？

如何使用 Webpack 實(shí)現(xiàn)模塊化打包？

Webpack 的運(yùn)行機(jī)制和核心工作原理

恭喜你又在前端道路上進(jìn)步了一點(diǎn)點(diǎn)。

點(diǎn)個(gè)“在看”和“贊”吧！