解决问题的第一步,先分析原因:

打开开发者工具=》NetWork,先clear一次,刷新,在network中可以看到,加载时间耗时最长的是那一条点开后源代码是下列字样

/*!
 * 
 * antd v3.13.5
 * 
 * Copyright 2015-present, Alipay, Inc.
 * All rights reserved.
 *       
 */
//下面的太多,我省略了

 说明这是和antd有关的,然后我进入了antd样式的源文件瞅瞅

React开发引入antd后首次加载过慢的解决办法

找到真凶!

后来发现官方有这么一个说法

React开发引入antd后首次加载过慢的解决办法

怪不得,引入antd.css 的确多引入了很多东西,首次加载的确消耗性能。当然,官方也给了相应的解决办法“按需加载”,

https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

按照步骤完成配置后,页面加载时间明显减少了1倍多,具体呈现如下 ,可以看到中间的样式被切割成了很多部分来加载

React开发引入antd后首次加载过慢的解决办法

完美! 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-25
  • 2021-08-22
  • 2021-04-13
  • 2021-04-27
猜你喜欢
  • 2022-12-23
  • 2021-06-10
  • 2021-05-10
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案