前端性能优化
以可视化为例的一个优化方案
问题：
未优化前网页平均打开时间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分钟，也能和老外飚英语？
网友评论