【Vue】首屏加载优化

1. 使用路由懒加载

• 首屏进入时只加载首屏相关路由，其他路由实现懒加载（打开时再去加载）

2. 使用异步组件

• 首屏加载组件时会将所有组件一起加载，而非首屏要显示的组件可以使用异步引入

3. 精灵图雪碧图

• 将多个需要请求的图片合成一张，可减少http请求

4. 使用webp格式图片

• 相同质量下，webp的图片体积比jpeg格式的图像减少40%，使得加载速度更快

5. 添加loading效果

• 在加载期间，添加loading提示、骨架屏、进度条等，可以从感知上减少用户等待时长

6. 事先设置图片宽高

• 可以避免图片的高度变化带来的重绘重排

7. 配置webpack

• 配置Webpack将代码拆分成多个小块，利用Tree Shaking、代码压缩等技术减少代码体积

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
};
1
2
3
4
5
6
7
8
9
10

8. 利用CDN加速资源

• 对于常用的第三方库和资源，借助CDN来加速（会寻找离自己物理最近的站点去获取资源）加载，从而提高页面加载速度。

<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js">script>
1

9. 延迟加载不重要的资源

• 对于非关键资源（如广告等），可以将其延迟加载。
• 或者不是主要的首屏组件，也可以使用延迟加载

10. 服务器端渲染

• 对于关键内容，使用服务器端渲染可以提供更快的加载速度。
• 服务器端将HTML直接发送到浏览器，减少了客户端渲染的时间。
• 因为在客户端需要运行js后再去拿数据。