使用 Vite 代替 CRA 开发 React 应用

2025-06-07

使用 Vite 代替 CRA 开发 React 应用

我们大多数人会使用Create React App来创建React App。它支持所有开箱即用的配置。但是，随着项目代码的增长，您可能会面临更长的构建时间、开发服务器启动速度变慢以及需要等待 2 到 5 秒才能反映代码更改的问题，而当应用程序规模扩大时，这些问题可能会迅速增加。

这增加了

  1. 开发时间，因为我们需要等待每次更改 2 到 6 秒。
  2. 生产构建时间，部署快速修复可能需要大约 10 到 20 分钟。
  3. 时间，时间就是金钱🙂。

为什么 CRA 开发服务器很慢？

CRA 使用Webpack打包代码。Webpack 会打包所有代码，因此如果您的代码库非常庞大，超过 10,000 行，您可能会发现开发服务器启动速度较慢，并且需要等待很长时间才能看到所做的更改。

捆绑器图像

正如您在上图中所看到的，整个代码已捆绑在一起，以使服务器准备好进行开发。

如何让它更快？

我们可以迁移到Vite ，而不是使用 CRA 来创建 React App。Vite是下一代前端工具，可以更快地构建应用程序。

Vite 的亮点

  1. 通过本机 ESM 提供按需文件服务，无需捆绑！
  2. 热模块替换 (HMR) 无论应用程序大小都能保持快速运行。
  3. 开箱即用地支持 TypeScript、JSX、CSS 等。
  4. 预配置的 Rollup 构建具有多页和库模式支持。
  5. Rollup-superset 插件接口在 dev 和 build 之间共享。
  6. 具有完整 TypeScript 类型的灵活编程 API。
  7. 支持 React、Vue、Preact、Svelte。

Vite 比 CRA 快多少？

Vite 使用用Go 编写的esbuild ，并且预捆绑依赖项的速度比基于 JavaScript 的捆绑器快 10-100 倍。

Vite 通过将应用程序的模块分为依赖项和源代码两类来提高开发服务器的启动时间。

依赖项大多是纯 JavaScript，在开发过程中不会经常更改。一些大型依赖项（例如AntD）的处理成本也相当高。

源代码通常包含需要转换的非纯 JavaScript（例如 JSX、CSS 等组件），并且会经常被修改。此外，并非所有源代码都需要同时加载（例如使用基于路由的代码拆分）。

vite-build

如上图所示，Vite 仅需在浏览器请求时按需转换并提供源代码。代码隐藏条件动态导入仅在当前屏幕上实际使用时才会处理。

我已将一个现有的基于 CRA 的 React 应用迁移到 Vite。让我们比较一下两者的区别。

CRA Dev 服务器启动时长

cra-dev-服务器

CRA花了12 秒启动开发服务器。示例应用仅包含 2 个路由和 6 个组件。让我们使用 Vite 看看效果。

Vite Dev 服务器启动时长

vite-dev-服务器

Vite仅用298 毫秒就启动了开发服务器，与 CRA 相比，速度快得惊人。由此可见，这两个工具之间存在着巨大的差异。我们再来比较一下两者的生产构建时间。

CRA 构建持续时间

cra-build

CRA构建应用程序耗时16.66 秒。让我们看看 Vite 的表现。

Vite 构建时长

Vite 使用与Rollup相同的捆绑方法进行生产构建，因为在生产中使用未捆绑的原生 ESM 会导致额外的 HTTP 请求。

vite-build

Vite 搭配 Rollup 仅用9.11 秒就构建了整个应用，相比 CRA 似乎更胜一筹。因为它将 Vite 的构建时间减少了 40% 到 50%。这更加高效。例如，如果您当前的构建时间为 20 分钟，那么使用 Vite 后将缩短至 10 到 12 分钟🚀。

对比较不满意请查看这条推文。

希望您正在考虑如何将当前的 React CRA 应用程序迁移到 Vite？

没什么大不了的！让我们重新开始吧

从 CRA 迁移到 Vite

  • 从package.json依赖项中删除react-scripts。
  • 如果您使用 CSS 或 SCSS，请在package.json中添加 sass 。
  • 添加以下依赖项作为开发依赖项
"devDependencies": {
  "@vitejs/plugin-react": "1.1.1",
  "vite": "2.7.0"
},
Enter fullscreen mode Exit fullscreen mode
  • 将以下命令添加到脚本中
"scripts": {
  "start": "vite",
  "build": "vite build"
},
Enter fullscreen mode Exit fullscreen mode
  • 在根文件夹中创建文件vite.config.js并添加以下代码
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default ({ mode }) => {
return defineConfig({
plugins: [react()],
define: {
"process.env.NODE_ENV": `"${mode}"`,
}
})
}
view raw .js hosted with ❤ by GitHub

react()用于避免手动导入Reactin.jsx和.tsx模块。

  • 将index.html文件移到公共文件夹之外。

  • 删除所有%PUBLIC_URL%来自index.html

//From
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
//To
<link rel="icon" href="/favicon.ico" />
Enter fullscreen mode Exit fullscreen mode
  • 在index.html的正文中添加以下脚本标签
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script> // Need to add
Enter fullscreen mode Exit fullscreen mode
  • 将您的 ENV 从REACT_APP更新为VITE，如下所示
// From
REACT_APP_ENV = local
REACT_APP_HOST_UR = https://reqres.in/api/
// To
VITE_ENV = local
VITE_HOST_URL = https://reqres.in/api/
Enter fullscreen mode Exit fullscreen mode

  • 现在只需运行npm install或yarn

  • 现在运行yarn start或npm start，完成！现在我们的 CRA 应用已迁移到 Vite。

笔记：

如果您在导入组件时遇到任何问题，请使用解析别名。

使用 Vite 的新 React 应用

使用以下命令创建一个新的 React 应用程序。

yarn create vite my-react-app --template react
Enter fullscreen mode Exit fullscreen mode

参考

  1. 维特
  2. esbuild
  3. 汇总
  4. Vite 预设模板

结论

与 CRA 相比，Vite 似乎非常高效、快捷，并且节省更多时间。试试Vite，你就能感受到它的不同。

感谢您的阅读。

在Twitter上获取更多更新。

你可以给我买杯咖啡来支持我 ☕

电子书

使用 ChatGPT 调试 ReactJS 问题：50 个基本技巧和示例

ReactJS 优化技术和开发资源

Twitter 实时关注者数量

Twitter 统计数据

更多博客

  1. 使用 Next.js、NextAuth 和 TailwindCSS 的 Twitter 关注者追踪器
  2. 不要优化你的 React 应用，而是使用 Preact
  3. 如何将 React 应用加载时间缩短 70%
  4. 使用 Next.js、Tailwind 和 Vercel 构建支持暗黑模式的投资组合
  5. React 中不再导入 ../../../
  6. 10 个 React 包，包含 1K 个 UI 组件
  7. 5 个软件包可在开发过程中优化和加速您的 React 应用
  8. 如何在 React 中以优化和可扩展的方式使用 Axios
  9. 15 个自定义 Hooks 让你的 React 组件更轻量
  10. 免费托管 React 应用的 10 种方法
  11. 如何在单页应用程序中保护 JWT
文章来源：https://dev.to/nilanth/use-vite-for-react-apps-instead-of-cra-3pkg
Devto 翻译
PREV
让我们使用 Java 和 Spring 从头开发一个电子商务应用程序
NEXT
2021 年前端开发人员必须具备的技能