【CSDN 編者按】如今對于每一位前端工程師來說，Webpack 已經成為一項基礎技能，它基本上包辦了本地開發、編譯壓縮、程序打包等工作。從這個角度來看，Webpack 確實是偉大的，但即使它如此偉大，也有個巨大的問題，就是 Webpack太難用了。

作者 | AsyncBanana? ? ? ?譯者 | 彎月

出品 | CSDN（ID：CSDNnews）

以下為譯文：

vue vite？Webpack 是當今最流行的打包工具之一。大量生產應用程序和框架（比如Next.js、Create React App 等）的打包和構建都采用了 Webpack。此外，它還擁有最大的插件庫，在這方面超過了任何其他同類工具。然而，自 Webpack 問世以來，時代已經發生了變化，如今在很多情況下，它已不是最佳工具。

為什么 Webpack 得到了迅速發展

Webpack 于 2014 年首次發布，當時的 JavaScript 生態系統與現在有很大的不同。在當時，Grunt 和 Gulp 在構建工具領域占據主導地位，它們的高級插件功能十分齊備，比如自動發布，或編譯 Sass 等。許多軟件包都是通過 CDN（Content Delivery Network，內容發布網絡）提供的。

但是，如果想在本地打包 npm 軟件包，以在前端代碼中使用，而不希望使用托管版本，則需要使用 Browserify。Browserify 的問題在于，盡管它擁有插件支持，但比不上 Grunt 或 Gulp 等構建工具。而 Webpack 將打包和構建結合到了一個工具中，降低了配置的難度。

現在的生態系統

安裝webpack、如今，市場上出現了很多其他打包軟件，比如 Rollup、Parcel、Vite 和Snowpack，以及新的原生模塊系統 ESM（即 ECMAScript 模塊）。這些新的打包程序具有更簡單的配置，我們可以更輕松地添加/創建插件和配置設置，而且一些打包程序還通過 ESM 實現了超快速的加載，且打包更小。因此， Webpack 不再是最好的工具。

為什么不應該使用 Webpack

3.1 速度慢

在啟動開發服務器時，Webpack 必須打包所有模塊。因此，服務器的啟動速度非常慢，通常需要 2～30 秒，甚至 150 秒才能啟動完成。

為了加快啟動速度，Parcel 之類的打包程序使用了緩存，Webpack 在版本5中也實現了緩存，但尚未在所有框架和插件獲得和支持，有些打包程序（比如 Vite 和 Snowpack）利用原生 ESM 大幅提高了速度，加載時間甚至縮短到了 250 毫秒。

webpack怎么使用？盡管 Webpack 也做了這方面的改進，但很難在開發模式下添加對 ESM 的支持，而且近期內都不太可能會實現。

3.2 易于配置

眾所周知，學習 Webpack 的配置非常困難。你需要一系列的插件完成很多簡單的操作（比如加載 CSS 等），而且配置文件非常復雜。

圖：一個簡單的Webpack配置文件

許多打包軟件，比如 Parcel 和 Vite 也支持許多操作，包括上圖中的大多數操作，但無需任何配置文件，并且大多數現代打包軟件的配置語法都非常簡單。例如 Create React App 完全可以自動管理，只不過靈活性非常差，隨著應用開發的進行，很多情況下你不得不“彈出”配置文件（也就是說，你需要刪除工具自帶的配置文件，手動編寫）。

3.3? 打包大小

Webpack，由于 Webpack 需要使用 polyfill 來加載模塊，因此它生成的包遠遠大于其他使用 ESM 和現代 JavaScript 語法的包。

雖然使用 polyfill 可以獲得瀏覽器的支持，但我們也可以利用插件，通過 nomodule 標記來最大化瀏覽器的支持，同時又可以保持現代瀏覽器的速度。但是，由于 webpack 當前不支持現代 ESM，因此實現不了這一點。

備選方案

如今市面上有許多其他打包軟件可供選擇，它們可以幫助你解決上述三個問題或部分問題。

• Parcel：部分解決問題1，完全解決問題2；

• Rollup：完全解決問題3，部分解決問題1和2；

• Vite：完全解決所有3個問題；

• Snowpack：完全解決問題1和3，部分解決問題2。

總結

盡管 Webpack 有大量的插件和社區支持，但是從很多方面來說，如今它算不上是最好的選擇。就個人而言，我更喜歡 Vite，因為它有效地解決了上述所有問題，不僅配置與 Parcel 一樣簡單，而且還可以使用 ESM。另外，上面列出的四個打包程序質量都很高。

原文鏈接：https://uxdesign.cc/android-1-0-how-does-it-look-today-476cbe74616a

聲明：本文由CSDN翻譯，轉載請注明來源。

60+專家，13個技術領域，CSDN 《IT 人才成長路線圖》重磅來襲！

直接掃碼或微信搜索「CSDN」公眾號，后臺回復關鍵詞「路線圖」，即可獲取完整路線圖！

?華為一則面試題登上熱搜；大眾點評會員因點贊過多被處罰；Linux Kernel 5.12 發布|極客頭條?“開源社區運營就像種菜”，黃東旭談開源商業化 | 獨家?到底是微信竊取隱私，還是輸入法光明正大收集用戶信息？