我们为什么从 Webpack 转向 Vite

译者 | Sergei Chestakov

翻译者 | 王磊策画 | 李德辰

在 Replit，他们的历史使命是让更多人随心所欲撰写标识符。他们为我们提供更多了完全免费的采用者端计算能力，让现代人能在任何人电子设备上构筑应用领域。现如今，React 是 Web 上最盛行的应用领域建立方式众所周知。但长久以来，React 辅助工具链在 Replit 上跑得都非常快。虽然 JavaScript 生态系为专精合作开发者提供更多了许多出众的辅助工具，但其中许多最盛行的辅助工具（比如 Create React App 和 Webpack）渐渐显得愈发繁杂和工作效率低落。

幸好他们已经看见 JavaScript 街道社区意识到了这个问题，并在著手构筑更慢、更高工作效率的辅助工具，这意味著我们总算能向采用者提供更多合乎他们期许的炫酷。

我们为什么从 Webpack 转向 Vite

这种新炫酷由 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

他们希望这项改进能协助我们更慢地构筑出自己的创意，期待看见你们的作品！