最近做了一个大屏项目，时间非常紧张，加班加点做了出来，没有管性能的问题，项目初步出来之后，有了时间做个性能优化。

页面性能分析

首先借助chrom浏览器的lighthouse简单分析一下页面性能

这是lighthouse给出的优化建议:

下面主要针对一下几个方向做优化

webp图片的缓存配置

项目中很多图片是webp格式，但是服务器返回图片的时候，没有像对png图片那样设置缓存的响应头，这里让后端配置了一些服务器

把项目的vue和echarts都改为通过cdn引入

把项目的较大的css js文件都输出为gzip，这里也要后端配置一下服务器，设置响应头为content-encode: gzip

利用字蛛压缩使用的苹方字体，源文件大小10M，我们利用常用的2500个汉字通过字蛛转换后得到一份大小只有500k的字体文件，大大提高了首屏加载速度

npm install font-spider -g

这是后面最终效果

可见，对于首屏加载速度的优化效果还是非常明显的