场景

今天本来心情好好的 , 按照往常一样 , 我准备开始一个新的项目 , 兴高采烈的打开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

image.png

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

• cra-template
  
  cra-template.png
  
  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.png

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

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

  
  
  react-dom.png
  
  

  12秒 , 嗯 , 不算慢

• react-scripts

  
  
  npmjs源react-scripts.png
  
  

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

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

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