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