文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

我们可以迁移到 Vite，而不是使用 CRA 来创建 React App。Vite 是下一代前端工具，可以更快地构建应用程序。...无论应用程序大小如何，热模块更新 (HMR) 都能保持快速。 对 TypeScript、JSX、CSS 等的具备开箱即用的支持。 支持多页面构建。 具有完整的 TypeScript 类型的 API。...我已将现有的基于 CRA 的应用程序迁移到 Vite。让我们比较一下差异。 CRA 开发服务器启动时间 VS Vite 开发服务器启动时间 CRA 用了 12 秒来启动开发服务器。...接下来，让我们也比较一下两者的生产构建时间。 CRA build 时间 VS Vite build 时间 CRA花了16.66秒来构建应用程序。让我们看看Vite的性能。.../api/ 现在，你可以执行 npm install or yarn 上述命令执行完毕后，npm run start 启动你的应用看看效果吧~ 结尾 Vite 看起来非常高效且快速，比 CRA 节省了更多的时间

1.8K20

我们如何使用 Next.js 将 React 加载时间缩短 70%

随着我们的客户规模和复杂性的增加，性能变得越来越受到关注，我们达到了 CRA 设计支持的极限。最重要的是，CRA 本身并不支持跨多页应用程序的路由分割，所以我们的页面加载时间慢得令人沮丧。...Next.js 是一个框架，带有构建工具和运行时库，用于创建丰富的 React 应用程序。...文件，该文件显式地为应用程序中的每个页面设置了一个路由组件： import Loadable from "react-loadable"; import { Route, Switch } from...此外，内置的 Next.js Webpack 配置会自动将页面分割成各自的包（bundle）。这意味着访问一个用于本地开发的页面只需要构建该页面所需的包内容。...虽然 CRA 支持代码分割，但根据我们的经验，Next.js 配置对于本地重建来说是开箱即用的，速度快得多。

5.6K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    再见Create React App，你好TanStack Create React App

    Create React App (CRA) 库于 2016 年发布，当时没有明确的方法来构建新的 React 应用，他们写道。...它将多个工具组合成一个推荐的配置来 简化应用开发，允许开发人员快速启动一个 React 项目。它包括网站的基本文件结构和一个开发服务器，用于在本地运行网站以方便开发。...最近发布的 2024 React 现状 将 CRA 排名第三，仅次于 Fetch API 和 useState。...Vercel添加对React Router v7应用程序的支持 React Router版本7与其之前的迭代略有不同，因为它也是一个与Remix合并后的框架。...本周，Vercel宣布它将支持用作框架的React Router v7应用程序。这包括使用Vercel的Fluid计算支持服务器端渲染的React Router应用程序。

    58410

    创建 React 应用的 7 种方式，你用过几种？

    一：Create-React-App 首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra) npx create-react-app my-app...因此社区中提供了一些可配置的 cra 方案，craco、react-app-rewired craco 可配置的 cra 这里以 craco 为例，首先需要安装 @craco/craco yarn add...运行 npm run start 启动脚本时， React 应用程序应该在端口 8080 上运行，此时我们可以在本地开发 react 应用了 配置 proxy 代理 开发时，需要请求接口，而接口往往是由后端同学完成的...，接口需要通过访问后端的 IP 地址来访问，若直接访问会存在跨域问题。...若以上两个网站访问速度较慢，那么掘金的码上掘金也可以帮助你创建在线 React 示例应用。

    9.4K10

    VS Code 调试完全攻略（5）：基于浏览器的 React 应用

    这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。你将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。...它超级强大，同时又很容易，所以在调试 CRA 和 React 程序时没有理由不这样做。 ? VS Code 调试完全攻略系列目录 ?...基础知识（点击直达） 步进逐行调试（点击直达） 编辑变量并重新执行函数（点击直达） launch.json 和调试控制台（点击直达） 基于浏览器的 React 应用（?...You can now view react-cra in the browser....request：被设置的 launch 选项意味着我们将会启动浏览器进行调试，并将加载下面指定的地址。它与你手动执行的操作并没有太大区别，但是会自动为你执行代码。

    3K20

    【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

    终于可以来一个与真实项目接近带有复杂度的项目，以 CRA 部署为例: 「部署一个 Creact React APP2 单页应用。」...# 创建一个 cra 应用 $ npx create-react-app cra-deploy # 进入 cra 目录 $ cd cra-deploy # 进行依赖安装 $ yarn # 对资源进行构建...构建时间优化: 构建缓存 我们注意到，一个前端项目的耗时时间主要集中在两个命令: npm install (yarn) npm run build 在本地环境中，如果没有新的 npm package 需要下载...「那 Docker 中是不也可以做到这一点？」 在 Dockerfile 中，对于 ADD 指令来讲，如果「添加文件内容的 checksum 没有发生变化，则可以利用构建缓存」。...访问 http://localhost:4000 页面成功。 6.

    2K20

    JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件

    您可以测试应用程序的许多方面，从单个函数及其返回值到在浏览器中运行的复杂应用程序。万丈高楼平地起，让我们先来了解一下有哪些测试。...E2E 测试的重点是在我们正在运行的应用程序中模拟实际用户（例如模拟滚动、单击和键入等行为），并检查我们的应用程序是否从实际用户的角度运行良好。...首先用 Create React App（CRA）搭建项目脚手架： create-react-app javascript-test-series 然后我们删除 src 目录下所有预创建的文件（当然你也可以手动删除...，可参考 Expect API CRA 已经为我们配置好了 Jest，这里直接运行 npx jest 命令，就可以看到测试结果了： PASS ....它允许我们在运行测试时，只渲染父组件而不渲染其所有的子组件。浅层渲染十分快速，因此非常适合单元测试。

    4.1K10

    【前端部署第九篇】通过 traefik 自动为前端项目配置域名及 HTTPS

    回到我们的 create-react-app 部署示例，我们如何将此项目可使他们在互联网通过域名进行访问？ 我们将它部署到 https://cra.shanyue.tech 中作为示例。...cra.shanyue.tech 域名通过 A 记录指向搭建好 traefik 网关的服务器的 IP 地址。此处需要通过域名提供商的控制台进行配置。...$ docker-compose -f domain.docker-compose.yaml up domain 访问 https://cra.shanyue.tech 成功。...通过 docker.sock 调用 Docker Engine API3 可将同一网络下所有容器信息列举出来。...长按识别二维码查看原文 标题：Docker Engine API # 列举出所有容器的标签信息 $ curl --unix-socket /var/run/docker.sock http:/containers

    2.3K20

    React 教程：React 快速上手指南

    显然，如果我们要把 Redux 和 React Router 等添加到 React，它就拥有了制作常规单页应用程序所需的所有东西，这可能这就是它有时被错误地描述为框架而不是库的原因 。...即使我们正在提取 Component，仍然需要 React，因为 Babel 在 JSX 之上转换为 React.createElement。所以如果我们不导入 React 就会失效。...**SetState **是一种更改本地状态对象的方法（通过执行浅层合并），之后组件通过重新渲染自己来响应它。...调用它的方式有好几种，其中一种方式允许我们在对状态进行更新能够后立即对组件执行某些操作： setState({value: ‘5’}) setState((state, props) => ({value...Context React 最近稳定的 Context API（已经在 React 中存在了相当长的时间，尽管被 Redux 等一些最受欢迎的库广泛使用，却是一个实验性功能）有助于我们解决一个问题：Props

    1.8K30

    SPA和React: 并不总是需要服务器端渲染

    您可能已经注意到，React文档的“开始一个新的React项目”部分不再推荐使用CRA(Create React App)。...现在我要讲一个几年前我构建的SPA的小故事，以便您自己判断。 SPA的完美可接受使用案例 回到2018年，我被一家“技术咨询”公司聘来执行一家位于伦敦的大型金融机构的“数字化转型”。...我构建的应用程序约需8周完成，仅使用客户端HTTP请求从API获取数据，具有身份验证功能，使用现有的Azure DevOps管道进行了部署，并且没有进行搜索引擎优化。...有许多内部应用程序永远不会面向公众，也不需要使用更现代的React驱动SSR框架提供的任何功能。但是由于React文档不再推荐CRA，如果今天要构建SPA，您还可以使用什么呢？...使用Vite和React Vite可以与React一起使用，作为比CRA中使用的Webpack(模块打包器)更现代的替代品。

    1.1K10

    Create React App 源码揭秘

    Create React App是一个官方支持的创建React单页应用程序的脚手架。它提供了一个零配置的现代化配置设置。 平时工作中一部分项目使用的React，使用之余也需要了解其脚手架实现原理。...此时已经实现了create-react-app`package的核心功能。下面将进一步剖析cra-tempalte, react-scripts`。...packages/cra-tempalte cra-tempalte可以从cra-tempalte拷贝，启动一个简易React单页应用。...对React原理感兴趣的可前往由浅入深React的Fiber架构查看。 packages/cra-tempalte--typescript 同上，不是本文讨论重点。...先来了解下使用node_modules模式的机制 将依赖包的版本区间解析为某个具体的版本号 下载对应版本依赖的tar 报到本地离线镜像 将依赖从离线镜像解压到本地缓存 将依赖从缓存拷贝到当前目录的node_modules

    4.4K20

    在 React应用中实现Web推送通知

    默认情况下，Create-react-app CRA的工作方式是在开发人员模式下不存在ServiceWorker，并且任何以前安装的sw都将被虚拟人替换。...额外的步骤：等等，生产模式如何？ 在这种情况下，Create React App会编译build文件夹中的文件，并在其中放置一个默认服务工作程序，其中包含对现代应用程序有用的东西。...首先，添加一个新的depenendecy： yarn add cra-append-sw 之后，我们需要在package.json中扩展build-script，在其中添加一个新命令，该命令在main进程之后执行...，这样整个行将如下所示： react-scripts build && cra-append-sw --skip-compile ....如果用户拒绝了这样的请求，您将没有第二次机会提供订阅，直到用户取消浏览器设置中的禁止（他们不太可能想要这样做）。因此，请明智地利用此机会选择合适的时间：用户首次访问您的网站绝对不是这种情况。

    4.3K30

    【原创】不想eject，还咋修改create-react-app的配置？

    一、先抛问题 许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。...今天胡哥就来带大家一起来看看这个问题~ 二、为啥不建议执行eject 1. 执行eject产生了什么变化？...create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中， 执行yarn eject后，会将webpack、babel等配置暴露在config目录下...执行eject带来了什么问题？ 首先，执行eject是不可逆的，复杂的webpack等配置由框架本身转交给用户自己进行维护了。...@7.3.0，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题，所以使用了低版本的。

    3.2K40

    React教程：组件，Hooks和性能

    首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，随着时间的推移，代码可能会变得难以维护，特别是在你不熟悉 React 的情况下。...通过错误边界，可以得到更多的灵活性。你可以在整个应用程序中使用并显示一个错误消息，或者在某些小部件中使用它但是不显示，或者显示少量信息来代替这些小部件。...它们本质上是带来了新的体验，例如： 允许删除许多 class 组件，这些组件我们仅仅是使用而不归我们拥有，例如本地状态或 ref，所以组件的代码看上去更容易阅读。...另一方面，useEffect 为我们的功能组件添加副作用，无论是订阅、API调用、计时器、还是任何我们认为有用的东西。...代码拆分 代码拆分的方式比这里给出的建议多得多，但让我们关注 CRA 和 React 本身可用的内容。

    3.5K30

    Next.js 越来越难用了

    为什么选择 Next.js 而不是 Create React App 当我首次接触 Next.js 时，它当时的“竞争对手”是 Create React App（简称 CRA）。...当时我所有的项目都是基于 CRA 来开发的，但之后我选择转向 Next.js，主要有两大原因： 我偏爱基于文件的路由方式，因为它让我能够减少样板代码的编写。...因此，我们采取了另一种策略，即暴露 Web 请求 API 中的特定方法，并针对不同的使用场景进行了统一和优化：这些 API 覆盖了组件、服务器操作、路由处理程序和中间件等场景。...在 PropelAuth，我们经常收到的错误报告并非真正的错误，而是用户误以为自己发起了一个 API 调用，但实际上只是读取了缓存的结果。...在电子商务领域，页面加载速度的提升意味着更多的收入，因此，为了获得这些优势，你完全会接受使用更为复杂的框架。 然而，如果我是在为我的 SaaS 应用程序构建仪表板，我可能就不会太关心这些功能了。

    1.1K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券