2020-06-11

前端性能优化

以可视化为例的一个优化方案

问题：

    未优化前网页平均打开时间7-9s（无缓存首次加载），请求资源数282个，消耗流量资源41.8M，多个超过1M的js文件，导致首屏渲染时间过长

优化思路

一、 对资源过大文件进行分割处理（webpack-splitChunks插件）

以app.js 为例，拆分前21M，拆分后3M.

二、 前端资源GZIP 压缩，需后端服务配合

到一步后我们的SPA页面首屏渲染所消耗的时间就会有很大的提升，请求的资源大小从37.5M压缩成5.2M，如图所示

三、 部分资源预加载关闭prefetch 和 preload（根据项目实际情况处理）

以可视化为例（All 里面有 239个请求，消耗32M流量）

通过分析后得知other类（消耗166个请求，总流量12.9M）

结合打包分析工具发现该类主要是地图json类文件（处于public/geoJson/china文件目录下）

关闭这些数据的预加载后请求资源总量缩短到72个request，页面请求瞬间缩短到1.85s

四、 静态资源cdn托管，设置HTTP/2，等

最终成果从首次加载平均耗时7-9s时间缩短到2s以下，请求资源从282个减少到72个，1M 以上的文件从十几个减少至1个，网络流量请求减少10M左右

阅读 5praise0

jubao举报 >

推荐每天练习5分钟，也能和老外飚英语？