Vite在現(xiàn)代前端開發(fā)中取代了WebPack，因為它通過本機ES模塊提供了更快的啟動和HMR，而開發(fā)服務(wù)器則在1秒內(nèi)開始，而WebPack的20秒也是如此。 2。它通過提供未轉(zhuǎn)移的ES6代碼，僅在必要時進(jìn)行轉(zhuǎn)換來利用現(xiàn)代瀏覽器功能，同時支持打字稿，JSX，CSS模塊以及更多開箱即用； 3。它通過直觀默認(rèn)值和乾淨(jìng)的插件系統(tǒng)簡化了配置，需要對React Integration之類的功能進(jìn)行最小的設(shè)置； 4。它包括對HMR，Dev Server代理，環(huán)境變量和CSS處理的內(nèi)置支持，而無需其他配置； 5。它的未來架構(gòu)包含ESM，與現(xiàn)代框架無縫合作，並與當(dāng)前的開發(fā)實踐保持一致，儘管WebPack仍然對遺產(chǎn)或複雜的用例可行，但它是新項目的理想選擇。 Vite最終通過大大減少等待時間並簡化工作流程來增強開發(fā)人員體驗。

Vite迅速成為現(xiàn)代前端開發(fā)的首選，這是有充分理由的。儘管WebPack長期以來一直是前端工具的骨幹，但其架構(gòu)（在Web開發(fā)的早期時代就建立）開始顯示其年齡。由Evan You（Vue的創(chuàng)始人）創(chuàng)建的Vite介紹了許多痛點開發(fā)人員當(dāng)今面臨的許多痛點，尤其是在速度，開發(fā)人員的經(jīng)驗和對現(xiàn)代工具的支持方面。

這就是Vite在許多新項目中取代Webbuild的原因：

1。帶有本機ES模塊的Blazing-Fast開發(fā)服務(wù)器

VITE的最大優(yōu)勢是其近乎固有的創(chuàng)業(yè)公司和開發(fā)過程中的刷新時間。

• WebPack在啟動Dev Server之前將所有內(nèi)容捆綁在一起。隨著您的應(yīng)用程序的增長，這個捆綁過程減慢了 - 有時需要10秒鐘才能開始。
• Vite在開發(fā)過程中跳過捆綁。相反，它可以直接從瀏覽器中使用本機ES模塊（ESM）提供代碼。僅通過HMR（熱模塊替換）重新加載更改的文件。

這意味著：

• 沒有等待Dev服務(wù)器啟動的幾分鐘。
• 次秒HMR更新，即使在大型應(yīng)用程序中也是如此。
• 更快的迭代=更好的開發(fā)人員體驗。

示例：在大型反應(yīng)或VUE應(yīng)用中，WebPack可能需要20秒才能開始； Vite從不到1秒鐘開始。

2。針對現(xiàn)代瀏覽器和工具進(jìn)行了優(yōu)化

Vite假設(shè)您是針對現(xiàn)代瀏覽器（大多數(shù)新應(yīng)用程序），並利用這一點。

• 它提供未轉(zhuǎn)移的ES6代碼和現(xiàn)代JavaScript功能直接到瀏覽器。
• 即使瀏覽器支持它，諸如WebPack之類的較舊工具也將所有內(nèi)容轉(zhuǎn)移到了前面。
• vite僅在必要時（例如，用於生產(chǎn)或較舊的瀏覽器）時將代碼轉(zhuǎn)移代碼，從而減少開銷。

此外，Vite還具有一流的支持：

• 打字稿
• JSX/TSX
• CSS模塊和預(yù)處理器（Sass，更少）
• WebAssembly
• 降價（通過插件）

不需要額外的配置 - 大部分的操作開箱即用。

3。更簡單的配置和插件系統(tǒng)

WebPack的配置可以快速變得複雜。

• 您通常需要設(shè)置規(guī)則，加載程序，插件和解決選項，以使基本功能正常工作。
• 隨著時間的流逝， webpack.config.js文件成為難以維護的整體。

另一方面，Vite：

• 使用最小默認(rèn)配置，該配置適用於大多數(shù)用例。
• 公開一個乾淨(jìng)，直觀的vite.config.js文件。
• 利用生產(chǎn)構(gòu)建的匯總（比Webpack的Bundler更簡單，更現(xiàn)代）。

示例：要在Vite中添加React支持，您只需安裝@vitejs/plugin-react ，然後將其包含在您的配置中：

 // vite.config.js
從'vite'導(dǎo)入{decteconfig}
導(dǎo)入從“@vitejs/plugin-react”中進(jìn)行反應(yīng)

導(dǎo)出默認(rèn)decteConfig（{
  插件：[React]，
}）

就是這樣 - 不需要Babel或WebPack加載程序設(shè)置。

4。內(nèi)置功能開發(fā)人員期望

Vite包括許多用於在WebPack設(shè)置中手動添加的工具開發(fā)人員：

• 熱模塊更換（HMR） - 開箱即用，更快，更可靠。
• 具有代理支持的開發(fā)服務(wù)器- 非常適合API集成。
• CSS處理- 自動導(dǎo)入，模塊和預(yù)處理。
• 環(huán)境變量- 來自帶有清晰前綴的.env文件加載。
• 打字稿支持- 不需要ts-loader或fork-ts-checker-webpack-plugin 。

您將獲得具有零配置的全功能開發(fā)環(huán)境。

5。未來的建築

Vite與現(xiàn)代應(yīng)用程序的構(gòu)建方式保持一致：

• 將ESM作為標(biāo)準(zhǔn)。
• 與Vue，React，Svelte和SolidJ等框架無縫地工作。
• 與CDN，Micro-Frontends和無服務(wù)器體系結(jié)構(gòu)都很好地集成在一起。

這不僅是一個捆綁者，而且是一個開發(fā)環(huán)境，旨在我們?nèi)绾卧?024年及以後構(gòu)建應(yīng)用程序。

當(dāng)webpack仍然有意義時

也就是說，Webpack還沒有死。它仍然很強大：

• 具有復(fù)雜構(gòu)建邏輯的舊項目。
• 必須支持非常古老的瀏覽器的應(yīng)用程序。
• 高級代碼分類和優(yōu)化方案。

但是對於新的Greenfield項目，尤其是使用React，Vue或其他現(xiàn)代框架，Vite通常是更好的選擇。

底線

Vite取代了WebPack，不是因為它是“新”，而是因為它解決了真正的開發(fā)人員痛點：

• 緩慢的啟動？走了。
• 複雜的配置？簡化。
• HMR滯後？幾乎是瞬間。

它更快，更精細(xì)，並且為我們今天編寫前端代碼的方式而建。隨著越來越多的團隊優(yōu)先考慮開發(fā)人員的經(jīng)驗和快速迭代，Vite的採用只會增長。

基本上 - VITE不僅包裝了您的代碼。它尊重您的時間。

以上是為什麼Vite替換了現(xiàn)代前端開發(fā)的Webpack的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！