在构建 React 应用程序(初学者、中级甚至专家)时,创建 React 应用程序 (CRA) 长期以来一直是所有技能水平的许多开发人员的首选工具。但是,它确实有一些明显的缺点,即速度和性能。

众所周知,CRA 在构建项目和设置开发服务器时可能会有些慢,大约需要 5-10 分钟(取决于硬盘和互联网连接问题等因素)。时间通常会增加,这就是为什么我要向您介绍一个名为Vite的工具。 Vite 是一个类似于 Webpack 的构建工具(CRA 在底层使用 Webpack)。更多信息可在此处获取)。)

在本文中,我将引导您完成使用 Vite 构建 React 应用程序的过程。您将了解 CRA 和 Vite 之间的区别,以及它的一些特性和优点,以及如何使用 Vite 创建 React 应用程序。

什么是Vite?

Vite,发音为/vit/,就像“veet”一样,是前端工具的下一代。它通过改善现代 Web 项目的开发体验来关注速度和性能。

Vite 由 Vue.js 的创建者 Evan You 创建,但它不是一个仅限 Vue 的工具。它可用于 React、Preact、Svelte、Vue、Vanilla JS 和 LitElements。

它由两个主要部分组成:

• 一个开发服务器,它为热模块更换 (HMR) 提供支持,以便在应用程序执行期间更新模块。当对应用程序的源代码进行更改时,只会更新更改,而不是整个应用程序。此功能有助于加快开发时间。

• 将代码与 Rollup 捆绑在一起的构建命令,预先配置为输出高度优化的静态资产以用于生产。

Vite是如何工作的?

Vite 的核心是做两件事

1. 在开发期间在本地提供您的代码。

2. 将您的 Javascript、CSS 和其他资产捆绑在一起进行生产。

还有其他工具(捆绑程序)可以做同样的事情,例如 webpack、Parcel 和 Rollup,那么 Vite 有什么不同呢?

上面提到的工具的问题是它们必须在每次保存时构建所有内容,如果您有一个非常大的应用程序,每次保存可能需要几分钟,即使在某些框架中使用热重载,更新速度也会显着提高当您向应用程序添加更多代码和依赖项时,速度会变慢。

Vite 对此采取了不同的方法,一种相反的方法。 Vite 立即启动服务器,获取不经常更改的依赖项,并使用esbuild预先捆绑它们。

Esbuild是一个用 Go 编写的 Javascript 构建工具,它预先打包依赖项的速度比基于 Javascript 的打包工具快 10-100 倍。

让我们看一下下面的插图,以更好地了解它的工作原理。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--1IYE1nZJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/6ryg4t91u58aqfv07070.png)

上图代表了一个传统的基于 bundle 的开发服务器,我们有一个入口点、可能的路由和所有模块,然后将它们捆绑在一起,然后开发服务器就准备好了。

另一方面,Vite 使用基于路由的代码拆分来确定代码的哪些部分实际需要加载,并且不必预先捆绑所有内容。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Gxag0pZ6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/itdp9q2wicj2ztkec2kp.png)

Vite 在现代浏览器中使用原生 ES 模块支持来提供源代码。这让浏览器可以承担开发中的捆绑工作,从而使您的代码能够立即加载,无论应用程序有多大。

它还支持热模块更换,以在开发过程中实现极快的反馈循环。

在为生产环境构建时,Vite 在后台使用 Rollup,因此您不必担心配置它。

为什么使用 Vite 而不是 CRA?

您可能会问为什么要使用 Vite,因为我们已经介绍了它是什么以及它是如何工作的。

我们在上一节中介绍了一些好处,所以我将在这里重点介绍它们。

性能

使用 ESbuild 进行预捆绑比使用任何其他 JS 捆绑器快 10 到 100 倍。这是因为它有助于提高页面速度并将 CommonJS / UMD 模块转换为 ESM。

热模块更换(HMR)

Vite 使用 HMR 功能来跟踪应用程序中的更改,而无需重新加载整个页面。使用 HMR API,浏览器将只加载页面的修改部分,并且仍然保留应用程序的状态。

您不需要手动设置这些 - 当您通过create-vite创建应用程序时,所选模板已经为您预先配置了这些。

原生 ECMAscript 模块支持

Vite 原生支持 ES 模块。它允许您使用 Typescript 等裸导入为浏览器进行开发,并在构建时将它们转换为正确版本化的导入。

丰富的功能

对 TypeScript、JSX、CSS 等的开箱即用支持。

在此处查看其他功能。

先决条件

在使用 Vite 之前,您需要几个先决条件:

• Node.js 版本 12.2.0或更高版本

• 包装管理器 -Npm或纱线

• 开发兼容浏览器

第三个要求是支持动态导入的浏览器。您可以通过访问:https://caniuse.com/es6-module-dynamic-import查看您的浏览器是否受支持。

支持大多数现代浏览器,但 Internet Explorer、Opera Mini 和百度浏览器除外。但是,如果您使用的是最新版本的 Chrome、Edge、Safari 或 Firefox,那么您应该已经准备就绪。

用Vite创建项目

为创建一个 Vite应用程序,打开终端并导航到要保存 Vite 程序的文件夹。然后运行这个命令:

npm create vite@latest

进入全屏模式 退出全屏模式

系统将提示您选择框架和变体(模板)。在我们的例子中,我们将使用 React,所以选择 React。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--wC5j_zo0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/tb8os8b3s6re8iq5u0ei.PNG)

您也可以在一行中直接指定您要使用的模板和项目名称:

npm init vite@latest my-react-app --template react

进入全屏模式 退出全屏模式

注意:my-react-app是我们要创建的投票应用程序的名称。您可以将其更改为您喜欢的任何名称

接下来,在终端中运行以下命令

cd my-react-app
npm install
npm run dev

进入全屏模式 退出全屏模式

继续... 运行上述命令将启动开发服务器。然后打开浏览器并输入http://localhost:3000。

您应该会看到一个带有计数器和按钮的 React 徽标,如下所示:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--szM2v2Go--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/uploads/articles/ikhk6vdmakj34lr8rq7t.png)

结论

我们去吧!我们已经了解了 Vite 是什么、它是如何工作的以及它的一些功能。我们还学习了如何使用 Vite 设置应用程序。

对于这个项目,create vite app 命令在 10 秒内设置完毕。之后我运行npm install来安装依赖项,这需要 35 秒。所以,总而言之,项目在 45 秒内就建立起来了。我相信你会同意这比 CRA 快得多;-)

我很想在评论部分听到您的想法,如果您喜欢这篇文章或发现它有见地,请与您的朋友和同事分享。另外,考虑订阅我的博客。

直到下一次,感谢您的阅读,祝您编码愉快!

在你走之前,这里有一些社区维护的模板可以查看。