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

        之前使用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 这个工具的的使用

给你复制文档的一段话

“1、新建一个echarts.html文件，为ECharts准备一个具备大小（轿梁宽高）的Dom。”

看下你的div容器有没有指定宽高样式，fixed也能指定袜拿宽高的百闭好运分比也可以只要能计算的出来

---