我们为什么从 Webpack 转向 Vite

傷城~ 2022-09-10 00:27 168阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

作者 | Sergei Chestakov

译者 | 王强

策划 | 李俊辰

在 Replit，我们的使命是让更多人轻松编写代码。我们为大家提供了免费的云端计算资源，让人们可以在任何设备上构建应用。如今，React 是 Web 上最流行的应用创建方法之一。但长期以来，React 工具链在 Replit 上跑得都很慢。尽管 JavaScript 生态系统为专业开发人员提供了很多出色的工具，但其中许多最流行的工具（例如 Create React App 和 Webpack）逐渐变得愈加复杂和效率低下。

所幸我们已经看到 JavaScript 社区意识到了这个问题，并在着手构建更快、更高效的工具，这意味着我们终于可以向用户提供符合他们期望的体验。

![76ffbcd1489369345662132dad371b13.png][]

这种新体验由 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

我们希望这项改进可以帮助大家更快地构建出自己的创意，期待看到你们的作品！

**延伸阅读**

https://blog.replit.com/vite

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！