我們爲什麼從 Webpack 轉向 Vite

作者 | Sergei Chestakov

譯者 | 王強

策劃 | 李俊辰

在 Replit，我們的使命是讓更多人輕鬆編寫代碼。我們爲大家提供了免費的雲端計算資源，讓人們可以在任何設備上構建應用。如今，React 是 Web 上最流行的應用創建方法之一。但長期以來，React 工具鏈在 Replit 上跑得都很慢。儘管 JavaScript 生態系統爲專業開發人員提供了很多出色的工具，但其中許多最流行的工具（例如 Create React App 和 Webpack）逐漸變得愈加複雜和效率低下。

所幸我們已經看到 JavaScript 社區意識到了這個問題，並在着手構建更快、更高效的工具，這意味着我們終於可以向用戶提供符合他們期望的體驗。

這種新體驗由 Vite 提供支持。這款 JavaScript 構建工具提供了快速而精益的開發體驗。Vite 具有許多特性，包括 HMR（熱模塊替換）、一條將你的工具與 Rollup 打包在一起的構建命令，以及對 TypeScript 和 JSX 的內置支持。

Vite 大大加快了 React 開發速度。在 HMR 的幫助下，你只需幾毫秒就能重新渲染，顯著提升原型 UI 的構建速度。考慮到這一點，我們決定使用 Vite 重寫我們的 React 模板，結果被它提供的速度大大震撼了。下面是同我們舊的 CRA 模板對比的結果：

https://twitter.com/amasad/status/1355379680275128321?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1355379680275128321%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fblog.replit.com%2Fvite

在過去的幾週中，我們新的 React 模板幫助我們的設計師製作了複雜的 UI 組件原型，並讓我們的許多應聘工程師在虛擬代碼面試的短短几個小時內就構建出一整個 Web 應用。看看它的實際效果，你就知道原因所在了：

工作機制

Vite 對待你的源代碼和依賴項的機制是不一樣的。與你的源碼不同，依賴項在開發過程中很少會更改。Vite 使用 esbuild 預打包你的依賴項，很好地利用了這一事實。Esbuild 是用 Go 語言編寫的一個 JS 打包器，其打包依賴項的速度比基於 JavaScript 的 Webpack 和 Parcel 等競爭方案快 10 到 100 倍。

然後，它通過原生 ES 模塊（ESM）提供源代碼，讓瀏覽器處理實際的打包工作。

最後，Vite 支持 HMR，確保在編輯文件時僅替換相關模塊，而不是重建整個包（後者將觸發頁面重載並重置狀態）。與其他打包器不同，Vite 在原生 ES 模塊上執行 HMR，這意味着在編輯文件時只需要處理受影響的模塊。這種機制可以讓更新時間保持在很低的水平上，而不是隨着應用程序的規模增長而線性增長。

入門

首先，只需在創建新的 repl 時 fork 我們的 React 模板，或在語言下拉列表中選擇 React.js。

Vite 是與框架無關的，因此，如果你用的不是 React，那麼你也可以使用 Vue 和 Vanilla JS 模板。

https://replit.com/@templates/VueJS-with-Vite

https://replit.com/@templates/Vanilla-Vite

我們希望這項改進可以幫助大家更快地構建出自己的創意，期待看到你們的作品！

猜你喜歡