深究create-react-app初始化项目巨慢的问题

最新推荐文章于 2023-04-02 10:38:11 发布
最新推荐文章于 2023-04-02 10:38:11 发布
阅读量4.5k 收藏 5
点赞数 4
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RexingLeung/article/details/105294870
版权

场景

今天本来心情好好的 , 按照往常一样 , 我准备开始一个新的项目 , 兴高采烈的打开cmd , 输入npx create-react-app xxx-project ; 舒服(煎熬)的等待中 , 居然10分钟过去还是

 

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.4
[1/4] Resolving packages...

[2/4] Fetching packages...

info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...

接着一次两次 , 还是这样 , 我....

排查过程

网络排查

然后就开始找原因 , 一开始我以为是我上网工具的原因 , 但是把它关闭了 , 还是一样 , 切到国内网络后 , 依然很慢 ;

npm源排查

这是我查看一下我的电脑的npm源 , 输入命令

 

$ npm config get registry
https://registry.npmjs.org/

emm ? 怎么是npmjs源了 , 然后我修改了npm源到国内的taobao源 , 输入

 

npm config set registry https://registry.npm.taobao.org

然后验证是否配置完成

 

$ npm config get registry
https://registry.npm.taobao.org/

出现 https://registry.npm.taobao.org/就证明设置完成
然后再次初始化react项目

 

$ npm init react-app my-app
npx: 99 安装成功，用时 5.793 秒

Creating a new React app in F:\worksplace\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...

info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 13 new dependencies.
info Direct dependencies
├─ cra-template@1.0.3
├─ react-dom@16.13.1
├─ react-scripts@3.4.1
└─ react@16.13.1
info All dependencies
├─ @babel/plugin-transform-flow-strip-types@7.9.0
├─ @babel/plugin-transform-runtime@7.9.0
├─ @babel/plugin-transform-typescript@7.9.4
├─ @babel/preset-typescript@7.9.0
├─ babel-preset-react-app@9.1.2
├─ cra-template@1.0.3
├─ eslint-config-react-app@5.2.1
├─ react-dev-utils@10.2.1
├─ react-dom@16.13.1
├─ react-error-overlay@6.0.7
├─ react-scripts@3.4.1
├─ react@16.13.1
└─ scheduler@0.19.1
Done in 103.30s.

Initialized a git repository.

Installing template dependencies using yarnpkg...
yarn add v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 20 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ react-dom@16.13.1
└─ react@16.13.1
info All dependencies
├─ @babel/runtime-corejs3@7.9.2
├─ @sheerun/mutationobserver-shim@0.3.3
├─ @testing-library/dom@6.16.0
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ @types/prop-types@15.7.3
├─ @types/react-dom@16.9.6
├─ @types/react@16.9.32
├─ @types/testing-library__dom@7.0.1
├─ @types/testing-library__react@9.1.3
├─ css.escape@1.5.1
├─ csstype@2.6.10
├─ dom-accessibility-api@0.3.0
├─ min-indent@1.0.0
├─ react-dom@16.13.1
├─ react@16.13.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ wait-for-expect@3.0.2
Done in 10.44s.
Removing template package using yarnpkg...

yarn remove v1.22.4
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.1.2: The platform "win32" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.12: The platform "win32" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 8.57s.

Created git commit.

Success! Created my-app at F:\worksplace\my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  yarn start

Happy hacking!

ohYeah ! 可以了

问题探索

为什么会出现在npmjs源下这么慢的问题 ?

分析问题

由于这次初始化项目时卡在了第一步 , 然后就查看一下 [2/4] Fetching packages... 这里究竟做了什么
我们先看看成功初始化react项目 , 具体做了什么
那么开始手动安装卡在第一步的那些包 , 先创建一个空目录 , 并npm init , 并将本地源设置到https://registry.npmjs.org/

 

npm config set https://registry.npmjs.org/

 

mkdir my-app
cd my-app
npm init

 

 

先看上面那张图 , 可以看出来最开始安装的包如下
├─ cra-template@1.0.3
├─ react-dom@16.13.1
├─ react-scripts@3.4.1
└─ react@16.13.1

  • cra-template
    npmjs上的cra-template

     


    cra-template大小36.3k
    This is the official base template for Create React App.
    If you don't specify a template (for example, --template typescript), this template will be used by default

这两句话 , cra-template是Create React App默认模板 , 当创建项目时未指定模板时如--template typescript , 这样 , 就会默认下载这个模板cra-template

然后我们在my-app下安装cra-template , npm源为npmjs源

 

cra-template

 

 

嗯 , 速度挺快的 , 那么就不是cra-template的问题

  • react-dom
    再看看这个react-dom包

     
    react-dom

     

     

    12秒 , 嗯 , 不算慢

  • react-scripts

     
    react-scripts

     

     

    再看看安装情况 , 我的天九十多万个包 , 用了248s

     
    npmjs源react-scripts

     


    继续对这个包进行处理 , 这是清空当文件, 然后再次npm init , 再安装一下这个包
    将当前npm源切换到baotao源
    baotao源react-scripts

     

     

    问题一览无余 , 78s , 快了不是一倍两倍的问题 , 其余的包基本上都是这个问题

RexingLeung
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
⚡️ React Native 启动速度优化——JS 篇【全网最全，值得收藏】
卤蛋实验室
04-16 479
如果你喜欢我的文章，希望点赞???? 收藏 ???? 评论 ???? 三连支持一下，谢谢你，这对我真的很重要！ 前言 上一篇文章主要从 Native 的角度分析了 React Native 的初始化流程，并从源码出发，总结了几个 React Native 容器初始化的优化点。本文主要从 JavaScript 入手，总结了一些 JS 侧的优化要点。 1.JSEngine Hermes Hermes 是 FaceBook 2019 年中旬开源的一款 JS 引擎，从 release 记录可以看出，这个是专为
create-react-app构建项目慢的解决方法
01-19
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch 解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-ap
create-react-app慢的解决方法
热门推荐
eagyne的专栏
12-21 2万+
React执行指令：create-react-app my-app卡、慢的解决方法。
react+ant启动服务时太慢解决方案
Nicholas_long的博客
12-25 2721
初学react+ant 运行时项目是项目非常缓慢 解决方案： 第一步：首先使用 npm config get registry 命令查看源 https://registry.npmjs.org/国外的镜像 每次用npm的，因为使用国外的镜像，非常的慢 通过改变默认npm镜像代理服务，可以大幅提升安装速度 第二步：安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 第三步：第二步安装成功之后使用 n
（亲测好用）构建React-app应用时create-react-app卡住超慢的解决办法
大雾起了清晨
04-02 1108
解决方案是换源，这个解决方法是从网上找到的，特此整理过来收藏一下。虽然平常使用cnpm来代替npm，但也只是使用新的指令而已。而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app指令默认调用npm，于是直接把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别。
fetchMetadata: sill mapToRegistry 报错 create-react-app 执行慢的解决方法
MichaelAn的博客
11-03 424
使用 create-react-app 库进行 React 项目初始化时，有时候会显示网络问题造成无法安装。更换网络，关闭代理，仍然无效。执行 create-react-app 会安装相关依赖（react react-dom react-scripts 等）。如果是默认的配置，那么使用国外的 npm 源进行安装，某些情况下网络不良的状态不能安装。把 npm 的源改成国内淘宝的源。更改源后，基本上10秒左右可以安装相关依赖，并初始化 React 项目。
解决create-react-app非常慢慢的解决方法
爱学习的人
02-06 573
淘宝源
create-react-app安装出错问题解决方法
01-19
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill ...
npx create-react-app xxx创建项目报错的解决办法
11-21
根据React官方文档（上图）可以发现，此时并不需要安装create-react-app工具，只要你的node >= 8.10 && npm >= 5.6，就可以直接使用npx create-react-app命令来创建项目。 报错 好的:OK_hand:，那就根据上面的来呗，...
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone git@github.com:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
create-react-app-esbuild:在您的create-react-app中使用esbuild进行更快的编译，开发和测试
05-13
:rocket: create-react-app-esbuild :rocket: 在您的使用可以更快地进行编译，开发和测试。特征在开发过程中用esbuild替换babel-loader 用esbuild替换babel-loader以加快构建时间用esbuild替换terser，以加快构建...
优化React使用npx创建项目的速度
一直奔跑的博客
09-24 1149
先执行 npm config set registry https://registry.npm.taobao.org (执行是没有结果的) -- 配置后可通过下面方式来验证是否成功 再执行 npm config get registry -- 或npm info express
使用creata-react-app脚手架创建react项目时非常慢的解决方法
YBWarmYoung的博客
04-02 852
创建react项目必须要有下面两个步骤 cnpm install -g create-react-app //创建react全局变量 create-react-app my-app //创建一个react项目 如果你们输入上面两行命令后出现下面这种错误 那应该就是创建react项目时，需要安装依赖包，而依赖包大多数都是外网的 有时候下载时间长了就会报错，有时候也会导致一直在下载 不会动这种情况 我们将npm的源进行更换，在命令行使用以下命令： npm config set registry htt
使用creata-react-app脚手架创建react项目时非常慢的问题
柯晓楠
09-18 1882
在使用 create-react-app 创建项目时，项目依赖包的下载速度非常慢，可能你的npm在使用外网下载，我们可以把默认的下载地址改成淘宝镜像。 操作方法： 更换npm源： npm config set registry https://registry.npm.taobao.org 检查是否更换成功： npm config get registry 执行完检查命令后，如果显示 https://registry.npm.taobao.org 该地址就表示配置成功了，然后再使用 create-rea
Nuxt项目初始化全过程
weixin_47886687的博客
11-05 2036
初始化项目 下载安装Nuxt脚手架 npx create-nuxt-app 项目名 百问百答环节 这是你的项目名? 选择什么语言? 用什么包管理器? 组件库选择 额外功能 代码检查器 测试框架 服务端渲染 目标服务器 开发工具 用什么来管理你的项目 启动 当运行完时，项目将安装所有依赖项，因此下一步是启动项目: 问你要不要进行匿名调查,可以选N 下载成功会出现网址 打开后显示,如果出现 404,可以用 127 替换尝
npx 初始化 React 项目 踩坑记录
qq_32944491的博客
11-09 593
初始化React项目踩坑记录
create-react-app 创建项目很慢和创建时出错
qq_43621905的博客
03-25 1047
create-react-app 是 facebook 官方出的 react 项目生成器，在使用过程中遇到了一些坑，这里记录下 在使用 create-react-app 生成项目时候速度很慢 // 安装create-react-app // 使用npm或者cnpm npm install -g create-react-app // 安装成功以后就可以这样来创建一个项目 create-reac...
2024年公关服务行业分析报告.pptx
最新发布
07-09
行业报告
create-react-app创建ts项目
08-17
要使用create-react-app创建TypeScript项目，您可以按照以下步骤进行操作： 1. 首先，保您已经安装了Node.js和npm。您可以在终端或命令提示符中运行以下命令来验证安装是否成功： ``` node --version npm --version ``` 2. 接下来，全局安装create-react-app。在终端或命令提示符中运行以下命令： ``` npm install -g create-react-app ``` 3. 然后，使用create-react-app命令创建新的TypeScript项目。在终端或命令提示符中运行以下命令： ``` npx create-react-app my-app --template typescript ``` 这将创建一个名为"my-app"的新目录，并使用TypeScript模板初始化React项目。 4. 进入项目目录： ``` cd my-app ``` 5. 最后，您可以使用以下命令启动开发服务器： ``` npm start ``` 这将启动开发服务器，并在浏览器中打开项目。 现在，您已经成功使用create-react-app创建了一个TypeScript项目。您可以根据需要在新项目中进行开发和定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值