阅读 128

vue首屏加载优化方案

首屏加载需要从多个维度出发考虑, 首屏加载占用时间多数来着对服务器资源的请求以及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,就等于加了个索引字典,出了问题可以定位到源代码的位置。

文章分类
前端
文章标签