2021-03-12【技术】Vue首屏加载慢

Vue众所周知，是一个轻量级的框架，源码仅仅为72.9KB，但是也有它自己的缺点，项目慢慢大起来之后，页面越来越多你会发现第一次进入vue项目变得很慢，这就是首屏加载慢，因为和传统项目相比，Vue会在首屏加载的时候加载出所有的组件和插件，并且向服务器请求数据，导致可能有时候首屏加载的时间就会到4、5秒的样子。
但是这样做很明显是在挑战用户的耐心，按照惯例，最好能把加载时间控制在1秒左右。

一般有这些常见原因：

1、有些项目图片很大也没有压缩 一般大图控制在300k以内 小图可以控制到50k以内 可以让美术压缩好素材再发给你
2、项目使用了一些插件 如轮播 倒计时等等
3、其他文件 还有些图标，字体文件等
4、代码写的有问题 需要优化代码
5、首页接口过慢 F12 查看Network接口响应速度 要求后端优化接口
6、项目过大页面太多 使用路由懒加载
7、ssr服务端渲染 渲染过程放到了服务器 直接返回html 加快首屏速度
这里推荐两个方法：
一、源码优化

1、代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

2、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。

for循环设置key值

3、Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。

Vue路由设置成懒加载

以前的路由文件是在顶部一次性全部import所有文件。

import A from './a.vue'
import B from './b.vue'
//...省略100个页面
Vue.use(VueRouter)
const routes = [
  {
    path: '/a',
    name: 'a',
    component: a
  },
  {
    path: '/b',
    name: 'b',
    component: a
  }
]

如果页面多在顶部一次性全部加载，那页面第一次加载就会慢。

使用懒加载

Vue.use(VueRouter)
const routes = [
  {
    path: '/a',
    name: 'a',
    component: () => import('./a.vue')
  },
  {
    path: '/b',
    name: 'b',
    component: () => import('./b.vue')
  }
]

在顶部不用引入了，然后在各个路由里面使用import()按需加载，这样只有使用对应路由的时候才会加载对应页面.

4、更加理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。

5、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

使用keep-alive

二、打包优化
1、修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。
2、使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

image.png

image.png

3、减少图片使用，因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。

4、按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。

按需引入element-ui库

---

1.把一些插件、图片、文件放到cdn里面加速，然后在项目里面使用cdn在线链接。
2.使用路由懒加载
以前的路由文件是在顶部一次性全部import所有文件。
···
import A from './a.vue'
import B from './b.vue'
//...省略100个页面

Vue.use(VueRouter)

const routes = [
{
path: '/a',
name: 'a',
component: a
},
{
path: '/b',
name: 'b',
component: a
}
]
···
如果页面多在顶部一次性全部加载，那页面第一次加载就会慢。

使用懒加载
···
Vue.use(VueRouter)

const routes = [
{
path: '/a',
name: 'a',
component: () => import('./a.vue')
},
{
path: '/b',
name: 'b',
component: () => import('./b.vue')
}
]
···
在顶部不用引入了，然后在各个路由里面使用import()按需加载，这样只有使用对应路由的时候才会加载对应页面，这不就解决了全部一起加载慢的问题了吗？

这就是懒加载或者说按需加载。