Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用。在突发奇想构建本地 React 开发环境时，它是不同技能的开发人员的首选工具。

CRA 拥有几个令人难以忽视的突出功能，其中最突出的是：本地开发服务器、热模块替换 (HMR) 和生产捆绑。然而，CRA 确实有一个明显的缺点，即渐进式速度和性能下降。

随着应用程序规模和复杂性的增长，Create React App 的性能趋于下降，启动开发服务器所需的时间显着增加。这使得 CRA 不适合生产。

在本指南中，我们将介绍 Vite，一个基于 esbuild 构建的构建工具。我们将涵盖开始使用 Vite 构建 React 应用程序所需了解的所有内容。我们还将回顾 Vite 与 CRA 之间的差异，并演示如何从 Create React App 迁移到 Vite。

跳跃前进：

先决条件
什么是维特？
Vite 和 Create React App 是如何工作的？
在开发中创建 React App
开发中的 Vite
为什么要使用 Vite？
- 出众的表演
- 广泛的插件兼容性
- 更快的更新
- 更快的构建时间
使用 Vite 3.0 设置 React 项目
将 Create React App 项目迁移到 Vite
Create React App 和 Vite 的区别
- 绝对进口
- 环境变量

先决条件

要学习本文的教程部分，您需要以下内容：

Node.js v14.18 或更高版本
支持原生 ES 模块 (ESM) 和动态导入的浏览器；大多数现代浏览器都有这种支持
包管理器，例如 npm 或 Yarn

什么是维特？

Vite 是一个构建工具，旨在弥合当前和下一代 Web 开发之间的差距。它专注于为开发人员和现代 Web 项目提供更快、更高性能的体验。

Vite 建立在 esbuild 之上，这是一个用 Go 编写的 JavaScript 捆绑器，它捆绑依赖项的速度比基于 JavaScript 的捆绑器快 10-100 倍。

Vite 创建者 Evan You 由Vue.js 的创建。但是，它与平台无关，这意味着它可用于开发 JavaScript/TypeScript 应用程序，并支持 React、Svelte、Preact 甚至 vanilla JavaScript 等流行库。

Vite 利用浏览器的原生 ESM 在浏览器请求时解析和编译您的代码。然后，它使用 Koa （轻量级 Node.js Web 服务器）等插件为源文件提供服务，以创建支持热模块替换 (HMR) 的开发服务器，用于更新服务模块和汇总用于生产构建。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

Vite 和 Create React App 是如何工作的？

Vite 和 CRA 并没有你想象的那么不同。在他们的核心，他们几乎做同样的事情，即为本地开发服务器和用于生产的捆绑代码提供服务。您会注意到的主要区别是在开发中如何提供代码以及支持哪些模块。

Create React App 是一个开发环境，它通过让开发人员专注于他们的代码而不是配置构建工具来帮助加快开发过程。

的第三方构建工具 CRA 使用名为webpack 来处理其核心功能。这确实是 Vite 所反对的。

那么，什么是 webpack ？ webpack 是一个 JavaScript 模块打包器，就像 Vite 一样。但与 Vite 不同的是，webpack 支持多个开箱即用的模块：

无害环境管理
CommonJS
异步模块定义 (AMD) API

webpack 使用这些 JavaScript 模块系统中的任何一个将资产和模块组合成一个或多个静态资产，然后它使用 Express.js Web 服务器和 webpack-dev-server 来提供来自捆绑资产的内容，并支持 HMR。

为了帮助您正确看待事物，我们将分解这两种工具在开发中如何处理这些功能。

在开发中创建 React App

当你第一次开始 CRA 开发时，webpack 做的第一件事就是使用应用程序的入口点（ index.js文件）从项目中的所有模块创建依赖关系树。

接下来，它使用 Babel 转译代码，将代码捆绑在一起，并通过 Express.js Web 服务器提供它。最后，它设置将处理热模块更换的套接字。

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换在多个 Node 版本
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js

尽管这种方法更快并且可以让您专注于您的代码，但它有一个明显的缺点。

每次代码发生变化时，webpack 都会重复打包过程。结果，当您的源代码变大时，一切都会变得迟缓。为开发服务器提供服务和构建项目所需的时间显着增加。

这是 CRA 开发过程的可视化描述：

开发中的 Vite

另一方面，Vite 只需要在您第一次开始开发时使用 esbuild 预先捆绑您的依赖项，然后它就可以开始为您的应用程序提供服务。

Vite 不需要在启动开发服务器之前捆绑整个应用程序或编译模块和代码；转译是按需完成的，因此比 CRA 快得多。

服务应用后，Vite 使用基于路由的代码拆分来确定需要加载哪部分代码，而不是像 CRA 那样重新构建和重新加载整个页面。接下来，它使用浏览器从应用程序的入口点解析原生 ES 模块。

这意味着浏览器将读取 import和 export代码中的语句，并为每次导入向服务器发送 HTTP 请求。然后，开发服务器拦截请求并在必要时执行代码转换。

没有任何更改的模块将返回 304“未修改”状态代码，因此浏览器会忽略它们。这样，浏览器不必重新加载，应用程序就可以保持其状态。

下面是 Vite 开发过程的可视化描述：

为什么要使用 Vite？

我们之前回顾了使用 Vite 进行 React 应用程序开发的一些优势。现在，让我们仔细看看 Vite 的好处。

出众的表演

在预捆绑过程中，Vite 将作为 CommonJS 或 UMD 交付的依赖项转换为 ESM。发生这种转换是因为 Vite 默认只支持 ESM 并提供原生 ESM 代码。

Vite 可以将具有多个内部模块的依赖关系转换为单个模块，以提高页面加载性能。这些模块往往会同时触发数百个请求，这可能会导致浏览器拥塞并对加载时间产生负面影响。但是，通过将这些依赖项预先捆绑到一个文件中，它们只需要发送一个请求，从而提高整体性能。

广泛的插件兼容性

Vite 利用 Rollup 插件接口通过允许开发者依赖于 Rollup 插件的成熟生态系统来改善开发者的体验。换句话说，Vite 与大多数开箱即用的 Rollup 插件兼容。

更快的更新

我们之前解释了随着应用程序大小的增加，HMR 速度如何在基于捆绑的服务器中显着下降。

在 Vite 中，HMR 是在原生 ESM 上执行的。当接受热更新的模块发生变化时，Vite 只需要精确地使该模块失效即可。无论应用程序的大小如何，这都会导致更快的 HMR 更新时间。

更快的构建时间

Vite 使用预先配置的 Rollup 来构建用于生产的应用程序。 Rollup 是一个比 webpack 更高效的打包工具，所以 Vite 的构建时间往往比 CRA 快，而且它的输出体积更小

使用 Vite 3.0 设置 React 项目

要创建 Vite 应用程序，请转到您机器的终端， cd到首选文件夹，然后运行以下命令：

npm create vite@latest

运行命令后，CLI 将提示您提供项目名称。在我们的例子中，我们将使用默认名称 vite-project. 接下来，我们将从选择react 可用模板列表中。这通常需要 10 秒或更短的时间。

或者，您可以在命令中指定您选择的模板，并避免通过提示。

您可以通过添加一个 --template标志，后跟框架的名称：

npm init vite@latest vite-project --template react

下一个， cd进入项目文件夹，安装必要的依赖项，并使用以下命令启动开发服务器：

cd vite-project
npm install
npm run dev

这些命令运行后，开发服务器将启动并在端口 5173 上运行。通常 Vite 只需 1325 毫秒即可为应用程序提供服务。

现在打开浏览器并输入 localhost:5173 。您将看到与下面类似的页面，其中包含典型的计数按钮。

而已！我们已经成功搭建了一个 Vite React 开发环境！

接下来，我们将了解如何将 Create React App 项目迁移到 Vite。

将 Create React App 项目迁移到 Vite

如果您有一个现有的 CRA 项目，将其迁移到 Vite 非常简单。

第一步，打开 package.json项目文件夹中的文件并删除 react-scripts从依赖项列表中：

  "dependencies": {..."react-scripts": "5.0.1",...},

接下来，添加一个 "devDependencies"内容如下：

  "devDependencies": {"@vitejs/plugin-react": "^2.0.1","vite": "^3.0.7"},

注意，建议始终使用最新版本

现在，替换脚本：

  "scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

具有以下内容：

  "scripts": {"start": "vite","build": "vite build",},

接下来，前往 index.html文件里面 Public文件夹并删除每个 %PUBLIC_URL%/链接路径中的前缀：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

将删除的前缀替换为以下内容：

<link rel="icon" href="./public/favicon.ico" />...
<link rel="apple-touch-icon" href="./public/logo192.png" />...
<link rel="manifest" href="./public/manifest.json" />

然后，在里面添加一个入口点脚本 body元素，就在下面 root分区：

<script type="module" src="/src/index.jsx"></script>

但在你这样做之前，重命名每个 .js包含 React 代码的文件 .jsx文件。例如，您将重命名 index.js文件 index.jsx.

然后，移动 index.html文件到根文件夹。

下一步是创建一个 Vite 配置文件，删除节点模块文件夹，并重新安装依赖项。

首先创建一个 vite.config.js根文件夹中的文件并添加以下代码：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({plugins: [react()],
})

接下来，转到根文件夹并删除 node_modules文件夹。然后，运行以下命令重新安装依赖项并启动开发服务器：

npm install
npm start

现在，如果您打开浏览器并转到 localhost:5173，开发服务器应该会成功启动。

Create React App 和 Vite 的区别

我们已经了解了 CRA 和 Vite 的工作原理，并回顾了使用 Vite 优于 CRA 的一些好处。现在，让我们来看看这些工具之间的一些区别。

绝对进口

当您开始使用 Vite 进行开发时，您可能会注意到的第一件事是路径解析的差异。与 CRA 不同，Vite 没有内置 src小路。

因此，不要像这样在 React 应用程序中导入文件和组件：

import Cards from "components/cards";

您需要像这样导入它们：

import Cards from “/src/components/cards.jsx”

幸运的是，有一个解决此路径的修复程序。

转到项目的根文件夹，打开 vite.config.js文件，并替换现有代码：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({plugins: [react()],
});

具有以下内容：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({resolve: {alias: [{find: "common",replacement: resolve(__dirname, "src/common"),},],},
plugins: [react()],
});

保存代码，现在您应该可以在项目中使用绝对路径了。

环境变量

Create React App 和 Vite 之间的另一个区别是环境变量命名约定。如果您在项目中使用环境变量，则需要替换 REACT_APP前缀 VITE.

//Instead of this
REACT_APP_ API_KEY = 1234567890..
//Use this
VITE_API_KEY = 1234567890..

Changing the variables one by one can be a pain, especially if you have a lot of variables present in the .env file. Fortunately, the vite-plugin-env-compatible package, lets us use environment variables without changing their names.

Use the following command to install the vite-plugin-env-compatible package:

npm i vite-plugin-env-compatible

接下来，前往 vite.config.js file in the root folder of the project and add the following code:

import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({...envPrefix: 'REACT_APP_',
plugins: [react(),envCompatible],
});

亦搜TV追剧App，整合了丰富的影视资源，看小说、听歌、看片统统免费！

这 envPrefix属性会告诉 Vite 使用带有 REACT_APP_字首。现在您可以在项目中使用环境变量而无需更改名称。但是，您仍然需要更换 process.env和 import.meta.env在你的代码中。

您可以使用 IDE 中的搜索功能快速查找和替换每个 process.env在您的代码库中。

结论

在本文中，我们介绍了 Vite，将其核心概念与 Create React App 的核心概念进行了比较，并研究了这两种工具在开发中的工作方式。我们还检查了使用 Vite 的好处，并演示了如何将 Create React App 项目迁移到 Vite。

全面了解生产 React 应用程序

调试 React 应用程序可能很困难，尤其是当用户遇到难以重现的问题时。如果您对监控和跟踪 Redux 状态、自动显示 JavaScript 错误以及跟踪缓慢的网络请求和组件加载时间感兴趣，请尝试 LogRocket 。

LogRocket 就像一个用于 Web 和移动应用程序的 DVR，几乎可以记录您的 React 应用程序上发生的所有事情。无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。 LogRocket 还监控您的应用程序的性能，并使用客户端 CPU 负载、客户端内存使用情况等指标进行报告。

LogRocket Redux 中间件包为您的用户会话增加了一层额外的可见性。 LogRocket 记录来自 Redux 存储的所有操作和状态。

Vite 3.0 vs. Create React App：比较和迁移指南相关推荐

【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
Create React App 2.0 正式发布：Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...

Vite 3.0 vs. Create React App：比较和迁移指南