Hello，大家好，我是 Sunday。

說實話，多年來，JavaScript 打包工具之王一直是 Webpack。它為歷史上一些最復雜、性能最高的 Web 應用程序提供了支持。

圖片

然而，就像技術領域的其他一切一樣，新的參與者不斷涌現(xiàn)，挑戰(zhàn)現(xiàn)狀。Vite 正是為此而生，它是一款新穎、快速且越來越受歡迎的打包工具，吸引了眾多開發(fā)者的注意并改變了他們的命運。

那么今天，咱們就來看看 webpack 和 vite 的歷史與過往。我們將深入探討 為什么 Webpack 在占據(jù)主導地位多年后逐漸失寵，以及為什么我和許多開發(fā)者開始轉向 Vite。此外，我們還會探討 Webpack 在當今這個快速變化的世界中還能挖掘哪些潛力。

Webpack 的崛起與統(tǒng)治

自 2012 年發(fā)布以來，Webpack 已成為 JavaScript 打包工具的標準。其強大的加載器和插件生態(tài)系統(tǒng)，讓它功能強大且用途廣泛。

過去六年里，我一直是 Webpack 的忠實擁躉。記得第一次接觸 Webpack 時，我對它的功能感到興奮。它不僅可以打包 JavaScript，還可以處理 CSS、圖像和字體，這在當時是一項革命性的功能。其模塊化設計和依賴管理功能，使 Webpack 成為復雜應用程序的理想選擇。

效率與適應性 ?

Webpack 的受歡迎程度部分歸功于它的多功能性和性能。無論你需要分割包、優(yōu)化圖片，還是其他高級需求，Webpack 都能滿足。這種“瑞士軍刀”式的工具讓它成為開發(fā)者們的必備之選。

但強大的功能往往伴隨著巨大的復雜性。隨著項目的復雜化，Webpack 的配置文件也變得愈加龐大，學習曲線變得陡峭。我常常發(fā)現(xiàn)自己花在調試 Webpack 上的時間，遠超開發(fā)應用的時間。

Webpack 的挑戰(zhàn)

為了更好地理解我所經歷的挑戰(zhàn)，我們來看看一些實際的數(shù)字：

• 初始構建時間：對于中型項目（約 500 個模塊），Webpack 的初始構建時間通常需要 30 到 90 秒，具體取決于配置的復雜性和插件數(shù)量。
• 增量構建：使用 Webpack 的熱模塊替換（HMR）時，通常需要 3-5 秒來反映更改，這在 Vite 出現(xiàn)之前已經算是相當快的了。
• 捆綁包大小：盡管經過優(yōu)化，Webpack 生成的捆綁包往往比預期的大，因此需要借助 webpack-bundle-analyzer 等工具來進一步調整。

這些數(shù)字雖然不算驚人，但隨著項目規(guī)模的擴大，時間消耗會逐漸累積，影響開發(fā)者的工作效率。

Vite 的出現(xiàn)

2020 年，Vite 橫空出世。這是 Vue.js 創(chuàng)作者尤雨溪推出的一個新構建工具。

初看之下，Vite 似乎只是另一個打包工具，但它的速度和簡便性使其迅速脫穎而出，吸引了眾多開發(fā)者。

速度的提升

Vite 的速度實在驚人。不同于 Webpack 通過一個大型包來處理所有內容，Vite 利用 ES 模塊 (ESM) 在開發(fā)過程中直接提供源文件。

這意味著無需在開發(fā)過程中進行打包，從而實現(xiàn)近乎即時的熱模塊替換 (HMR)。對我來說，這是一個巨大的改變。每次進行更改時，我再也不用等待幾秒鐘甚至幾分鐘來重建了。

Vite 的數(shù)字對比

以下是 Vite 與 Webpack 的對比數(shù)據(jù)：

• 初始構建時間：對于同樣的中型項目，Vite 的初始構建時間約為 1-2 秒。這與我以前使用 Webpack 時的 30-90 秒有天壤之別。
• 增量構建：Vite 的 HMR 速度幾乎是即時的，通常耗時不到 100 毫秒。這意味著更改幾乎在保存文件后立即生效。
• 捆綁包大?。篤ite 由于內置優(yōu)化和對 ES 模塊的依賴，通常能夠生成較小的捆綁包，無需過多配置。

簡單易用 ??

Vite 的簡潔性是它受歡迎的另一個原因。還記得 Webpack 的復雜配置嗎？在 Vite 面前，這些都成為了過去。

Vite 提供了一套合理的默認設置，配置起來非常簡潔明了。這意味著我可以把更多的時間投入到實際開發(fā)中，而不是與構建工具搏斗。

生態(tài)系統(tǒng)與插件支持

那插件和生態(tài)系統(tǒng)呢？這是 Webpack 的強項，但 Vite 也在迅速趕超。

Vite 的生態(tài)系統(tǒng)在快速發(fā)展，幾乎每種需求都有對應的插件，從 TypeScript 支持到 Vue、React，甚至是舊版瀏覽器支持。而且，Vite 的設計非常靈活，需要時可以輕松編寫自定義插件。

Vite 的插件系統(tǒng)雖然還在完善，但與 Webpack 相比，API 更加簡單。由于 Vite 是基于現(xiàn)代標準構建的，許多插件無需大量配置即可運行。

Webpack 的衰落？

為什么 Webpack 逐漸失去了優(yōu)勢？

答案在于：其復雜性和現(xiàn)代開發(fā)需求的變化。

復雜性與配置負擔

如前所述，Webpack 的強大功能帶來了復雜的配置。對于新手開發(fā)者，甚至是有經驗的開發(fā)者，Webpack 配置的復雜性可能令人望而卻步。優(yōu)化 Webpack 配置往往耗時費力，嚴重影響生產效率。

性能瓶頸 ?

即使 Webpack 經過優(yōu)化，它仍然是一個傳統(tǒng)的打包工具。在大型項目中，重建時間可能非常緩慢。雖然 Webpack Dev Server 和 HMR 等工具有所幫助，但它們仍然無法與 Vite 的速度相比。

現(xiàn)代開發(fā)需求 ??

當今開發(fā)環(huán)境正在不斷演變。Vue 3、React 和 Svelte 等現(xiàn)代框架不斷推動 Web 開發(fā)的前沿，它們利用了 ES 模塊等現(xiàn)代 JavaScript 功能。Vite 基于 ESM 的方法和對速度與簡潔性的追求，正好符合這些現(xiàn)代需求。

Webpack 還能繼續(xù)使用嗎？ ??

在當今環(huán)境下，Webpack 仍有它的價值。盡管存在缺點，Webpack 仍然是一個強大的工具，尤其是對于需要最大靈活性和定制性的大型企業(yè)應用程序而言。Webpack 5 引入了許多重要改進，如更好的緩存、模塊聯(lián)合和搖樹優(yōu)化功能。

對于需要這些高級功能的項目，Webpack 仍然是一個不錯的選擇。然而，對于大多數(shù)開發(fā)者，尤其是中小型項目，Vite 更具吸引力。它的速度、簡單性和現(xiàn)代方法正在吸引越來越多的開發(fā)者。