Pro Ant Design 使用analyze 优化前端首次加载时间

Posted 2023-03-02

参考技术A         之前使用Pro Ant Design（react）脚手架做了个web前端项目，在打包发布的时候，发现打包后静态文件太大了，首次加载需要16秒中的时间。

在Pro Ant Design 官网找到了 npm run analyze 指令分析打包文件的大小， 根据analyze的分析后，将加载速度优化了3秒，记录下过程。首先运行npm run analyze 得到

根据图中的信息可以清楚的看到前端加载的每个库文件所占的体积。发现echarts（数据图标库）这个库占的文件太大了。

echarts在我的项目中只是首页展示的几个圆圈，但是整个库的体积比蚂蚁金服的Ant Design库还要大。所以想到将这个库替代。

       上图是echarts库使用和不使用加载时间对比，发现快了三秒。之后我将echarts的库改为pro ant design 自带的表格库使用进行替代。

       前端加载优化还可以从很多方面如手，比如压缩图片，减少接口请求。这里就不再涉及了。简单介绍下analyze 这个工具的的使用