首屏加载需要从多个维度出发考虑, 首屏加载占用时间多数来着对服务器资源的请求以及js对数据的处理和浏览器渲染,从这三个方面下手相信能解决大部分的首屏加载缓慢问题:
webpack:
1.项目打包时开启gzip压缩
2.打包时不打包sourcemap文件[1]
3.不打包库文件
图片:
1.图片懒加载
2.使用雪碧图
3.字体图标代替图片
4.使用webp,svg,base64等图片格式替代jpeg,jpg等格式
vue:
1.使用路由懒加载
2.三方插件按需引入
服务器层面:
1.静态资源上传CDN
2.nginx开启gizp格式传输
3.开启http2.0
css:
1.合并多个css,减少http请求
2.css文件放在前面
js:
1.使用异步加载
2.脚本放在底部
对于移动端的话,可以考虑加个骨架屏去达到一个较好的用户体验。
[1] sourcemap是为了方便线上调试用的,因为线上代码都是压缩过的,导致调试极为不便,而有了sourcemap,就等于加了个索引字典,出了问题可以定位到源代码的位置。