Vite 简介

作为一名 React 开发人员，使用 Create React App 启动新项目并运行它们可能会很痛苦。首先，在创建新应用程序时安装所有 140MB 依赖项。接下来，每次进行新的更改时，它都会使用 Webpack 打包代码。因此，应用程序越大，构建应用程序以反映更改所需的时间就越长。

在本文中，主要介绍下一代前端工具 Vite。

什么是 Vite，为什么要使用它？

你们中的一些人可能以前听说过 Vite，但它到底是做什么的？

更快的服务器启动

它本质上是一种服务器启动缓慢的解决方案，webpack、Parcel 和 Rollup 等大多数工具都是基于打包的的，这意味着代码必须完全打包后才能提供服务。随着应用程序变得越来越大，加载站点所需的时间将成倍地变慢。

另一方面，Vite 使用原生 ESM 提供代码。这意味着浏览器就像打包程序一样，无论应用程序大小如何，网站都会快速加载。

更快的更新

它本质上是通过在本机 ES 模块上提供代码来解决长服务器启动问题。我们见过的大多数工具，如 webpack、Rollup 和 Parcel，随着应用程序变得越来越大，都会遇到性能瓶颈。启动开发服务器可能会变得很慢，这会让开发人员感到沮丧。

这是因为这些工具是基于捆绑的，这意味着必须首先完全打包代码才能启动服务器。

所以可以想象，对于大型应用程序，这可能是一个阻碍开发人员生产力的问题。

另一方面，Vite 使用原生 ES 模块 (ESM) 来提供代码。根据他们的文档，这意味着：

让浏览器接管捆绑器的部分工作。Vite 只需要在浏览器请求时按需转换和提供源代码。只有在当前屏幕上实际使用时，才会处理条件动态导入背后的代码。

来源：Vite 文档

更快的更新

一些像 webpack 这样的打包工具支持热更新 (HMR)。在这种情况下，正在运行的应用程序只反映所做的更改，而无需重新加载整个页面。但是，随着应用程序变大，HMR 确实需要更长的时间，从而使页面更新速度变慢。

Vite 也解决了这个问题，因为 HMR 是在原生 ESM 上执行的。这意味着无论应用程序的大小如何，HMR 都将快速更新页面。

使用 Vite：设置一个 React 应用

现在我们已经了解了为什么 Vite 是解决常见 Web 开发挑战的强大工具，让我们开始使用它吧！

在这个示例中，我将会展示如何使用 Vite 设置 React 应用程序。在此之后，我们将不再需要体验 Create React App 的缓慢性。

第一步：创建 Vite 项目

首先，运行命令创建一个Vite项目：

npm create vite@latest

然后，为项目命名，如下所示：

接下来，为此示例选择“React”框架：

或者…

您可以使用以下命令简单地创建一个新的 React 应用程序，而无需通过选项：

npm create vite my-vite-react-app --template react

第 2 步：运行并启动服务器

最后，安装我们需要的依赖项并使用以下命令启动应用程序：

npm install && npm run dev