webpack和vite的區(qū)別，為什么vite啟動速度比webpack快？
????? 寫在開頭
點贊 + 收藏 === 學會??????
一.webpack和vite的區(qū)別
1.構建速度不同
Webpack: Webpack的構建速度相對較慢，尤其在大型項目中，因為它需要分析整個依賴圖，進行多次文件掃描和轉譯。
Vite: Vite以開發(fā)模式下的極速構建著稱。它利用ES模塊的特性，只有在真正需要時才編譯文，而不是整個項目。這使得它在開發(fā)環(huán)境下幾乎是即時的。
2.開發(fā)模式不同
Webpack: Webpack通常使用熱模塊替換（HMR）來實現(xiàn)快速開發(fā)模式，但配置相對復雜。
Vite: 采用了基于ES Module的開發(fā)服務器，只有在需要時才會編譯對應的模塊，大幅度提升了開發(fā)環(huán)境的響應速度。
3.配置復雜度不同
Webpack: Webpack的配置相對復雜，特別是在處理不同類型的資源和加載器時。
Vite: Vite在設計上更注重開箱即用，大部分場景下用戶無需自己寫配置文件，但同時也支持自定義配置，使其適用于復雜項目。
4.插件生態(tài)不同
Webpack: Webpack擁有龐大的插件生態(tài)系統(tǒng)，適用于各種不同的需求。
Vite: Vite也有相當數(shù)量的插件，但相對較小，因為它的開發(fā)模式和構建方式減少了對一些傳統(tǒng)插件的需求。
5.編譯方式不同
Webpack: webpack在編譯過程中，會將所有模塊打包為一個bundle.js文件，然后再運行這個文件。
Vite: 沒有打包的步驟，它利用了瀏覽器的ES Module Imports特性，只有在真正需要時才編譯文件。
6.應用場景不同
Webpack: 適用于復雜的大型項目，特別是需要大量自定義配置和復雜構建管道的項目。
Vite: 更適用于小到中型項目，或者需要快速開發(fā)原型和小型應用的場景。
二.為什么vite啟動速度比webpack快？
1、開發(fā)模式的差異
在開發(fā)環(huán)境中，Webpack 是先打包再啟動開發(fā)服務器，而 Vite 則是直接啟動，然后再按需編譯依賴文件。（大家可以啟動項目后檢查源碼 Sources 那里看到） 這意味著，當使用 Webpack 時，所有的模塊都需要在開發(fā)前進行打包，這會增加啟動時間和構建時間。 而 Vite 則采用了不同的策略，它會在請求模塊時再進行實時編譯，這種按需動態(tài)編譯的模式極大地縮短了編譯時間，特別是在大型項目中，文件數(shù)量眾多，Vite 的優(yōu)勢更為明顯。
Webpack啟動
Vite啟動
2、對ES Modules的支持
現(xiàn)代瀏覽器本身就支持 ES Modules，會主動發(fā)起請求去獲取所需文件。Vite充分利用了這一點，將開發(fā)環(huán)境下的模塊文件直接作為瀏覽器要執(zhí)行的文件，而不是像 Webpack 那樣先打包，再交給瀏覽器執(zhí)行。這種方式減少了中間環(huán)節(jié)，提高了效率。
什么是ES Modules？
通過使用 export 和 import 語句，ES Modules 允許在瀏覽器端導入和導出模塊。
當使用 ES Modules 進行開發(fā)時，開發(fā)者實際上是在構建一個依賴關系圖，不同依賴項之間通過導入語句進行關聯(lián)。
主流瀏覽器（除IE外）均支持ES Modules，并且可以通過在 script 標簽中設置 type="module"來加載模塊。默認情況下，模塊會延遲加載，執(zhí)行時機在文檔解析之后，觸發(fā)DOMContentLoaded事件前。
3、底層語言的差異
Webpack 是基于 Node.js 構建的，而 Vite 則是基于 esbuild 進行預構建依賴。esbuild 是采用 Go 語言編寫的，Go 語言是納秒級別的，而 Node.js 是毫秒級別的。因此，Vite 在打包速度上相比Webpack 有 10-100 倍的提升。
什么是預構建依賴？
預構建依賴通常指的是在項目啟動或構建之前，對項目中所需的依賴項進行預先的處理或構建。這樣做的好處在于，當項目實際運行時，可以直接使用這些已經(jīng)預構建好的依賴，而無需再進行實時的編譯或構建，從而提高了應用程序的運行速度和效率。
4、熱更新的處理
在 Webpack 中，當一個模塊或其依賴的模塊內容改變時，需要重新編譯這些模塊。
而在 Vite 中，當某個模塊內容改變時，只需要讓瀏覽器重新請求該模塊即可，這大大減少了熱更新的時間。
總結
總的來說，Vite 之所以比 Webpack 快，主要是因為它采用了不同的開發(fā)模式、充分利用了現(xiàn)代瀏覽器的 ES Modules 支持、使用了更高效的底層語言，并優(yōu)化了熱更新的處理。這些特點使得 Vite在大型項目中具有顯著的優(yōu)勢，能夠快速啟動和構建，提高開發(fā)效率。
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
浙公網(wǎng)安備 33010602011771號