文章目录 1. 使用路由懒加载 2. 使用异步组件 3. 精灵图雪碧图 4. 使用webp格式图片 5. 添加loading效果 6. 事先设置图片宽高 7. 配置webpack 8. 利用CDN加速资源 9. 延迟加载不重要的资源 10. 服务器端渲染
1. 使用路由懒加载
首屏进入时只加载首屏相关路由,其他路由实现懒加载(打开时再去加载)
2. 使用异步组件
首屏加载组件时会将所有组件一起加载,而非首屏要显示的组件可以使用异步引入
3. 精灵图雪碧图
4. 使用webp格式图片
相同质量下,webp的图片体积比jpeg格式的图像减少40%,使得加载速度更快
5. 添加loading效果
在加载期间,添加loading提示、骨架屏、进度条等,可以从感知上减少用户等待时长
6. 事先设置图片宽高
7. 配置webpack
配置Webpack将代码拆分成多个小块,利用Tree Shaking、代码压缩等技术减少代码体积
module. exports = { configureWebpack : { optimization : { splitChunks : { chunks : 'all' } } }
} ;
8. 利用CDN加速资源
对于常用的第三方库和资源,借助CDN来加速(会寻找离自己物理最近的站点去获取资源)加载,从而提高页面加载速度。
< script src = " https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js" > </ script>
9. 延迟加载不重要的资源
对于非关键资源(如广告等),可以将其延迟加载。 或者不是主要的首屏组件,也可以使用延迟加载
10. 服务器端渲染
对于关键内容,使用服务器端渲染可以提供更快的加载速度。 服务器端将HTML直接发送到浏览器,减少了客户端渲染的时间。 因为在客户端需要运行js后再去拿数据。