背景
接手了一个祖传项目, 前端监控统计出首屏加载未达标, 于是来不及解释了, 开干
无图无真相
先贴几张优化前后的对比图片
优化前
优化后
如何做到的呢
CDN-离用户最近的一公里
开启CDN存储和加速的DNS预解析
<meta http-equiv="x-dns-prefetch-control" content="on"/>
<link rel="dns-prefetch" href="//static-a.demo.com"/>
<link rel="dns-prefetch" href="//static-b.demo.com"/>
<link rel="dns-prefetch" href="//static-c.demo.com"/>
<link rel="dns-prefetch" href="//static-d.demo.com"/>
<link rel="dns-prefetch" href="//static-e.demo.com"/>
<link rel="dns-prefetch" href="//static-f.demo.com"/>
<link rel="dns-prefetch" href="//static-g.demo.com"/>
<link rel="dns-prefetch" href="//static-h.demo.com"/>
充分利用好8个异步线程
减少首屏DOM数量
先上图
优化前
优化后
减少DOM数量需要的改动
- 首页有几个根据网络请求和用户交互展示的弹框, 用
v-if取代v-show - 能用
background-image的就不要用img标签
压缩首页所需要的图片
- 用
panda压缩 - 小图片转成
base64
对用户交互才使用的SDK做异步加载
利用webapack的magic comment
handleClick () {
import(/* webpackChunkName: 'MYSDK' */'mysdk').then(({ default: MYSDK }) => {
new MYSDK({})
})
}
生产环境移除sourceMap
后续
首屏加载没有最好只有更好, 是一个可以持续优化的技术点
