為什麼我們從Webpack切換到Vite - Replit

儘管JavaScript生態系統為專業開發人員提供了出色的工具，但許多最受歡迎的工具（如Create React App和Webpack）變得越來越複雜和效率低下。幸運的是，我們已經看到JavaScript社群認識到了這個問題，並開始構建更快，更高效的工具，這意味著我們終於可以提供使用者期望我們提供的體驗。

這種新體驗由JavaScript構建工具Vite提供支援，該工具提供了快速而精益的開發體驗。Vite具有許多功能，包括HMR或Hot Module Replacement（熱模組替換），將您的工具與Rollup捆綁在一起的構建命令，以及對TypeScript和JSX的內建支援。

Vite使React開發變得更快。好像真的很快。使用HMR，您可以在幾毫秒內重新觸發觸發器，從而使原型UI變得非常快。考慮到這一點，我們決定使用Vite重寫React模板，我們震驚地看到它快了很多。

在過去的幾週中，我們新的React模板幫助我們的設計師為複雜的UI元件製作了原型，並使我們的許多工程實現者可以在（虛擬）現場的短短几個小時內構建整個Web應用程式。

原理

Vite通過不同方式對待您的原始碼和依賴項來工作。與您的原始碼不同，依賴關係在開發過程中變化的頻率幾乎沒有。Vite通過使用esbuild預捆綁您的依賴項來利用這一事實。Esbuild是用Go語言編寫的JS捆綁程式，其捆綁依賴項的速度比基於Webpack和Parcel的基於JavaScript的備選方案快10到100倍。

然後，它通過本機ES Modules或ESM提供您的原始碼，ESM允許瀏覽器處理實際的捆綁。

最後，Vite支援HMR，該功能可確保在編輯檔案時僅替換相關模組，而不是重建整個包，這將觸發頁面重新載入並重置狀態。與其他捆綁軟體不同，Vite在本地ES模組上執行HMR，這意味著僅在編輯檔案時才需要使受影響的模組無效。這樣可確保更新時間始終保持快速，而不是隨著應用程式的增長而線性擴充套件。

入門

首先，只需在建立新的repl時派生我們的React模板或在語言下拉選單中選擇React.js即可。

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

我們希望這可以幫助您更快地提出您的想法，並期待看到您的想法！