之前使用Pro Ant Design（react）脚手架做了个web前端项目，在打包发布的时候，发现打包后静态文件太大了，首次加载需要16秒中的时间。
在Pro Ant Design 官网找到了 npm run analyze 指令分析打包文件的大小， 根据analyze的分析后，将加载速度优化了3秒，记录下过程。首先运行npm run analyze 得到
运行 npm run analyze
根据图中的信息可以清楚的看到前端加载的每个库文件所占的体积。发现echarts（数据图标库）这个库占的文件太大了。
echarts在项目的使用
echarts在我的项目中只是首页展示的几个圆圈，但是整个库的体积比蚂蚁金服的Ant Design库还要大。所以想到将这个库替代。
echarts使用和不使用加载时间对比
上图是echarts库使用和不使用加载时间对比，发现快了三秒。之后我将echarts的库改为pro ant design 自带的表格库使用进行替代。
前端加载优化还可以从很多方面如手，比如压缩图片，减少接口请求。这里就不再涉及了。简单介绍下analyze 这个工具的的使用
网友评论