解决问题的第一步,先分析原因:
打开开发者工具=》NetWork,先clear一次,刷新,在network中可以看到,加载时间耗时最长的是那一条点开后源代码是下列字样
/*!
*
* antd v3.13.5
*
* Copyright 2015-present, Alipay, Inc.
* All rights reserved.
*
*/
//下面的太多,我省略了
说明这是和antd有关的,然后我进入了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倍多,具体呈现如下 ,可以看到中间的样式被切割成了很多部分来加载
完美!