我們?yōu)槭裁磸?Webpack 轉(zhuǎn)向 Vite
點(diǎn)擊上方 前端瓶子君，關(guān)注公眾號(hào)
回復(fù)算法，加入前端編程面試算法每日一題群
在 Replit，我們的使命是讓更多人輕松編寫代碼。我們?yōu)榇蠹姨峁┝嗣赓M(fèi)的云端計(jì)算資源，讓人們可以在任何設(shè)備上構(gòu)建應(yīng)用。如今，React 是 Web 上最流行的應(yīng)用創(chuàng)建方法之一。但長(zhǎng)期以來，React 工具鏈在 Replit 上跑得都很慢。盡管 JavaScript 生態(tài)系統(tǒng)為專業(yè)開發(fā)人員提供了很多出色的工具，但其中許多最流行的工具（例如 Create React App 和 Webpack）逐漸變得愈加復(fù)雜和效率低下。
所幸我們已經(jīng)看到 JavaScript 社區(qū)意識(shí)到了這個(gè)問題，并在著手構(gòu)建更快、更高效的工具，這意味著我們終于可以向用戶提供符合他們期望的體驗(yàn)。
這種新體驗(yàn)由 Vite 提供支持。這款 JavaScript 構(gòu)建工具提供了快速而精益的開發(fā)體驗(yàn)。Vite 具有許多特性，包括 HMR（熱模塊替換）、一條將你的工具與 Rollup 打包在一起的構(gòu)建命令，以及對(duì) TypeScript 和 JSX 的內(nèi)置支持。
Vite 大大加快了 React 開發(fā)速度。在 HMR 的幫助下，你只需幾毫秒就能重新渲染，顯著提升原型 UI 的構(gòu)建速度?？紤]到這一點(diǎn)，我們決定使用 Vite 重寫我們的 React 模板，結(jié)果被它提供的速度大大震撼了。下面是同我們舊的 CRA 模板對(duì)比的結(jié)果：
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 模板幫助我們的設(shè)計(jì)師制作了復(fù)雜的 UI 組件原型，并讓我們的許多應(yīng)聘工程師在虛擬代碼面試的短短幾個(gè)小時(shí)內(nèi)就構(gòu)建出一整個(gè) Web 應(yīng)用?？纯此膶?shí)際效果，你就知道原因所在了：
Vite 對(duì)待你的源代碼和依賴項(xiàng)的機(jī)制是不一樣的。與你的源碼不同，依賴項(xiàng)在開發(fā)過程中很少會(huì)更改。Vite 使用 esbuild 預(yù)打包你的依賴項(xiàng)，很好地利用了這一事實(shí)。Esbuild 是用 Go 語(yǔ)言編寫的一個(gè) JS 打包器，其打包依賴項(xiàng)的速度比基于 JavaScript 的 Webpack 和 Parcel 等競(jìng)爭(zhēng)方案快 10 到 100 倍。
然后，它通過原生 ES 模塊（ESM）提供源代碼，讓瀏覽器處理實(shí)際的打包工作。
最后，Vite 支持 HMR，確保在編輯文件時(shí)僅替換相關(guān)模塊，而不是重建整個(gè)包（后者將觸發(fā)頁(yè)面重載并重置狀態(tài)）。與其他打包器不同，Vite 在原生 ES 模塊上執(zhí)行 HMR，這意味著在編輯文件時(shí)只需要處理受影響的模塊。這種機(jī)制可以讓更新時(shí)間保持在很低的水平上，而不是隨著應(yīng)用程序的規(guī)模增長(zhǎng)而線性增長(zhǎng)。
首先，只需在創(chuàng)建新的 repl 時(shí) fork 我們的 React 模板，或在語(yǔ)言下拉列表中選擇 React.js。
Vite 是與框架無關(guān)的，因此，如果你用的不是 React，那么你也可以使用 Vue 和 Vanilla JS 模板。
https://replit.com/@templates/VueJS-with-Vite
https://replit.com/@templates/Vanilla-Vite
我們希望這項(xiàng)改進(jìn)可以幫助大家更快地構(gòu)建出自己的創(chuàng)意，期待看到你們的作品！