Hello，大家好，我是 Sunday。

說(shuō)實(shí)話，多年來(lái)，JavaScript 打包工具之王一直是 Webpack。它為歷史上一些最復(fù)雜、性能最高的 Web 應(yīng)用程序提供了支持。

圖片

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

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

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

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

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

效率與適應(yīng)性 ?

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

但強(qiáng)大的功能往往伴隨著巨大的復(fù)雜性。隨著項(xiàng)目的復(fù)雜化，Webpack 的配置文件也變得愈加龐大，學(xué)習(xí)曲線變得陡峭。我常常發(fā)現(xiàn)自己花在調(diào)試 Webpack 上的時(shí)間，遠(yuǎn)超開(kāi)發(fā)應(yīng)用的時(shí)間。

Webpack 的挑戰(zhàn)

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

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

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

Vite 的出現(xiàn)

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

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

速度的提升

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

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

Vite 的數(shù)字對(duì)比

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

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

簡(jiǎn)單易用 ??

Vite 的簡(jiǎn)潔性是它受歡迎的另一個(gè)原因。還記得 Webpack 的復(fù)雜配置嗎？在 Vite 面前，這些都成為了過(guò)去。

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

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

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

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

Vite 的插件系統(tǒng)雖然還在完善，但與 Webpack 相比，API 更加簡(jiǎn)單。由于 Vite 是基于現(xiàn)代標(biāo)準(zhǔn)構(gòu)建的，許多插件無(wú)需大量配置即可運(yùn)行。

Webpack 的衰落？

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

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

復(fù)雜性與配置負(fù)擔(dān)

如前所述，Webpack 的強(qiáng)大功能帶來(lái)了復(fù)雜的配置。對(duì)于新手開(kāi)發(fā)者，甚至是有經(jīng)驗(yàn)的開(kāi)發(fā)者，Webpack 配置的復(fù)雜性可能令人望而卻步。優(yōu)化 Webpack 配置往往耗時(shí)費(fèi)力，嚴(yán)重影響生產(chǎn)效率。

性能瓶頸 ?

即使 Webpack 經(jīng)過(guò)優(yōu)化，它仍然是一個(gè)傳統(tǒng)的打包工具。在大型項(xiàng)目中，重建時(shí)間可能非常緩慢。雖然 Webpack Dev Server 和 HMR 等工具有所幫助，但它們?nèi)匀粺o(wú)法與 Vite 的速度相比。

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

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

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

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

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