快将你的 React 应用迁移到 Vite 吧,速度太快啦

简介: 我们大多数人将使用 Create React App 来创建 React App。 它支持所有开箱即用的配置。 但是,当您的项目代码增长时,您可能会面临更高的构建时间、开发服务器的启动速度变慢并等待 2 到 5 秒以反映您在代码中所做的更改,并且当应用程序大规模增长时,这可能会迅速增加。

我们大多数人将使用 Create React App 来创建 React App。 它支持所有开箱即用的配置。 但是,当您的项目代码增长时,您可能会面临更高的构建时间、开发服务器的启动速度变慢并等待 2 到 5 秒以反映您在代码中所做的更改,并且当应用程序大规模增长时,这可能会迅速增加。

这增加了

  • 开发时间,因为每次更改我们需要等待 2 到 6 秒。
  • 生产构建时间,部署快速修复可能需要大约 10 到 20 分钟。

But, 时间就是金钱🙂。

为什么 CRA 如此慢?

CRA 使用 Webpack 来 bundle 代码。 Webpack 会 bundle 整个代码,因此如果您的代码库非常大,超过 10k 行,您可能会看到开发服务器的启动速度较慢,并且需要很长时间才能看到所做的更改。如下图所示:

img

如何变得更快?

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

Vite 有哪些亮点

  1. 使用 ESM 模块化方案,按需加载文件,无需提前 bundle!
  2. 无论应用程序大小如何,热模块更新 (HMR) 都能保持快速。
  3. 对 TypeScript、JSX、CSS 等的具备开箱即用的支持。
  4. 支持多页面构建。
  5. 具有完整的 TypeScript 类型的 API。
  6. 支持 React、Vue、Preact、Svelte。

Vite 比 CRA 快多少?

Vite 基于 esbuild,它是用 Go 编写的,并且预 bundle 依赖项的速度比基于 JavaScript 的 bundler 快 10-100 倍。

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

依赖项大多是纯 JavaScript,在开发过程中不会经常更改。 但是,一些大型依赖项(例如 AntD)的处理成本也很高。

源代码通常包含需要转换的非纯 JavaScript(例如 JSX、CSS 或其他组件),并且会经常被编辑。 此外,并非所有源代码都需要同时加载(例如,使用基于路由的代码拆分)。

img

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

我已将现有的基于 CRA 的应用程序迁移到 Vite。 让我们比较一下差异。

CRA 开发服务器启动时间 VS Vite 开发服务器启动时间

img

CRA 用了 12 秒来启动开发服务器。 该示例应用程序仅包含 2 个路由和 6 个组件。 让我们用 Vite 看看同样的情况:

img

Vite启动开发服务器只花了298ms,与CRA相比是非常快的。你可以看到这两种工具之间的巨大差异。接下来,让我们也比较一下两者的生产构建时间。

CRA build 时间 VS Vite build 时间

img

CRA花了16.66秒来构建应用程序。让我们看看Vite的性能。

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

img

Vite 构建整个应用只用了 9.11 秒,与 CRA 相比似乎更好。 因为它在使用 Vite 时减少了 40% 到 50% 的构建时间。 例如,如果您当前的构建时间是 20 分钟,那么使用 Vite 时会缩短到 10 到 12 分钟。

将 CRA 迁移到 Vite

  1. package.json 中移除 react-scripts 依赖,并添加下述依赖项作为 devDependencies
"devDependencies": {
  "@vitejs/plugin-react": "1.1.1",
  "vite": "2.7.0"
},
  1. 接着,添加下述命令到 scripts字段:
"scripts": {
  "start": "vite",
  "build": "vite build"
},
  1. 然后,在项目根目录创建 vite.config.js 文件。
  2. 文件夹 public 中的 index.html 文件移动到根目录。
  3. 从 index.html 中删除所有的 PUBLIC_URL%
//-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
//+
<link rel="icon" href="/favicon.ico" />
  1. 在 index.html 的主体中添加下面脚本:
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
  1. 将你的 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/
  1. 现在,你可以执行 npm install or yarn
  2. 上述命令执行完毕后,npm run start 启动你的应用看看效果吧~

结尾

Vite 看起来非常高效且快速,比 CRA 节省了更多的时间。不妨试试将你的 React 应用迁移到 Vite。

相关文章
|
26天前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
10天前
|
监控 前端开发 JavaScript
确保 React 应用在出现错误时仍然能够保持响应式
【10月更文挑战第25天】可以有效地确保React应用在出现错误时仍然能够保持响应式,为用户提供更加稳定、可靠的使用体验。在实际应用中,需要根据项目的具体情况和需求,综合运用这些方法,并不断优化和完善错误处理机制,以适应不断变化的业务场景和用户需求
|
17天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
44 8
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
1月前
|
设计模式 SQL 前端开发
使用 GraphQL 和 React 构建动态前端应用
【10月更文挑战第2天】使用 GraphQL 和 React 构建动态前端应用
46 0
|
3月前
|
前端开发 JavaScript 开发工具
跨域联姻:React.NET——.NET应用与React的完美融合,解锁前后端高效协作新姿势。
【8月更文挑战第28天】探索React.NET,这是将热门前端框架React与强大的.NET后端无缝集成的创新方案。React以其组件化和虚拟DOM技术著称,能构建高性能、可维护的用户界面;.NET则擅长企业级应用开发。React.NET作为桥梁,使.NET应用轻松采用React构建前端,并优化开发流程与性能。通过直接托管React组件,.NET应用简化了部署流程,同时支持服务器端渲染(SSR),提升首屏加载速度与SEO优化。
60 1
|
3月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
39 0
|
3月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
41 0