你知道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