你知道Vite和Webpack嗎？也許有不少"程式猿"對它們十分熟悉。

Webpack

Webpack是一個JavaScript應用程式的靜態模組打包工具，它會對整個應用程式進行依賴關係圖構建。而這也會導致一個不可避免的情況，使用Webpack啟動應用程式的伺服器，會花費比較長的時間——一些大型應用程式可能需要10分鐘以上。

此時你心裡可能已經在抓狂了，為什麼會這麼費時間？那就讓我們一起看看基於 Webpack 包的整個工作流。

基於Webpack包的工作流

當我們儲存檔案時，整個JavaScript包將由Webpack重建，即使啟用了HMR，我們進行修改可能也需要10秒鐘才能在瀏覽器呈現。在比較複雜的環境下，Webpack的反饋卻如此之慢，會為開發人員帶來極大不便。

說完了Webpack我們再為大家介紹一下Vite。

Vite

Vite是新一代JavaScript構建工具，旨在提高開發人員在構建JavaScript應用程式時對Webpack的體驗。

Vite根據JavaScript生態系統中最近所做的兩項改進——瀏覽器中ES模組的可用性，以及esbuild等本機捆綁工具的編譯功能，為開發者提供更加強大的支援。

Vite的核心理念是非捆綁式開發建設。

瀏覽器中ES模組的可用性允許您在瀏覽器上執行JavaScript應用程式，而無需將它們捆綁在一起。

Vite的核心思想很簡單：當瀏覽器請求時，使用ES模組進行轉換並提供一段應用程式程式碼。

開始開發後，Vite將首先將JavaScript模組分為兩類：依賴模組和應用程式模組。

依賴模組是從node_modules資料夾匯入的JavaScript模組。這些模組將使用esbuild進行處理和繫結，esbuild是用Go編寫的JavaScript繫結器，執行速度比Webpack快10到100倍。

應用程式模組是為應用程式編寫的模組，通常涉及特定於庫的擴充套件，如：jsx / vue 或 scss檔案。

雖然基於捆綁程式的工作流（如Webpack）必須在單個瀏覽器請求之前處理整個JavaScript模組，但Vite僅在單個瀏覽器請求之前處理依賴模組。

在必要時，Vite會對我們的整個應用模組進行轉換。

為了方便大家的理解，下面為大家介紹基於Vite的完整工作流程。

基於 Vite的工作流程

這張圖可以清晰的讓大家理解，為什麼Vite能夠比Webpack更快地處理我們的開發構建。

如果用一個通俗的說法比較二者，就好像我們去一家餐廳吃飯，Webpack的後廚一口氣做完所有的飯，然後一道道為你上菜；而Vite的廚子手腳麻利，很快做完一道菜就上一道菜。

使用Vite，處理開發構建的時間會隨著應用程式的增長緩慢增加。

Vite 的捆綁構建

雖然現在所有主流瀏覽器都支援原生ES模組，但釋出一個包含諸如tree-shaking、延遲載入和通用塊拆分等效能優化技術的捆綁應用程式，仍然比非捆綁應用程式會為開發者帶來更好的使用體驗，整體效能更高。

由於這個原因，Vite內建了一個build的配置的命令，該命令使用Rollup捆綁應用程式；我們可以根據自己的具體需求對Rollup進行自由配置。

Vite 入門基礎

使用Vite構建一個應用很簡單，vite build建立一個預配置的應用程式，主流前端框架React、Vue和Svelte等都可以支援。

建立應用程式所需的命令：

$ npm init @vitejs/app

或者

$ yarn create @vitejs/app

終端中的提示將指導您建立正確的應用程式，然後執行 npm install

啟動開發伺服器

npm run dev

除此之外，還可以建立Vite+React的應用程式。React 的起始頁與Create React App的預設模板非常相似，只是稍作修改：

此外Vite preview用於在本地對應用進行預覽，還支援許多官方模板，包括vanilla JavaScript和TypeScript。

結論

從目前的的使用狀況來看，Vite毫無疑問是新一代JavaScript構建工具中最快捷的，但是面對競爭，Webpack也對一些內容進行優化，作為經典老牌工具Webpack使用者基數本身就很大， 實力依舊不容小覷，現在依舊是許多流行應用程式（如Next）的預設JavaScript構建工具。

但隨著時間不斷推移，Vite周邊的生態力量逐漸跟上，結合它本身有的快速的優勢，後來居上，也是顯而易見的事情。

作為開發者，當然也不會獨斷專言必須使用哪一個，根據不同得場景選不同的工具，期待在未來這些工具可以進一步為開發助力，讓開發變得更加方便。

拓展閱讀

大家如果對Vue感興趣，不妨跟著實戰教程，親自搭建一個基於Vue3的表格編輯系統。

原文連結：https://blog.bitsrc.io/vite-is-better-than-webpack-d5dd59610d56