如何解决vue首屏首次加载慢的问题？系统性能提升之探索

时间：2023-03-12 作者：admin 浏览：

项目背景

使用vue框架开发时间长了以后，随着项目的组件越加越多，首次请求某个路由所加载的文件数量也越来越多，单个文件也越来越大，导致打开某个页面白屏时间越来越长，load时间明显加长，在硬件设备相对不足的环境下，白屏时间甚至由几秒到十几秒，体验甚差；

为了解决这个问题，小编走上项目性能提升的探索之路，几番折腾，为自己炼了不少钢铁，分享给大家参考，下面我们一点一点的讲：

开发环境

vue2 + vue-cli3 + webpack4

1、router路由改为懒加载，按需加载

老生常谈，相信大家已经查了不少网上的资料，关于路由按需加载的配置都看腻了，但还是得提，谈优化离不开路由，一个页面对应一个路由，一个路由对应着一个component组件，加载页面就是加载这个组件对应的资源，所以想要页面加载的文件少，路由必须按需加载，具体的做法就是将路由对应的component组件改成异步加载，即使用import()方法，例如，加载用户列表：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '@/layout'

const routers = new Router({
    mode: 'hash',
    scrollBehavior: { y: 0, x: 0},
    routes: [
        {
            name:  'Layout',
            path:  '/',
            component: Layout,
            meta: { title:  '首页',  icon:  'el-icon' },
            children: [
                {
                    name: 'UserList',
                    path: 'userList',
                    component: () => import('@/views/userList'),
                    meta: { title: '用户列表', icon: '' }
                },
                {
                    name: 'roleList',
                    path: 'roleList',
                    component: () => import('@/views/roleList'),
                    meta: { title: '角色列表', icon: '' }
                }
            ]
        }
    ]
})

可以看到，上面的userList和roleList页面并不像平时静态资源引入一样直接在当前文件import ... from ...的，而是用函数运行import()方法，这样做的好处是当打开userList页面时，并不会加载roleList页面的资源，实现了按需加载，减轻请求负担，自然页面打开就变快了；

2、静态组件改为异步组件

静态与异步的区别就在于，静态引入组件是页面一打开就加载，而异步则是使用才加载相应的js、css、img等等，跟上面的路由懒加载是同一个做法，即引入组件改为异步的方法，下面展示这两种方式：

<template>
    <el-button @click="addUser">新增用户</el-button>
    <el-button @click="showDetail">用户详情</el-button>
    <add-user ref="add"  />
    <user-detail ref="detail" />
</template>
<script>
import addUser from '@/views/userList/components/addUser'//静态

export default{
    components:{
        addUser,
        userDetail:()=>import('@/views/userList/components/userDetail')//异步
    }
}
</script>

上面的addUser组件为静态资源，在页面打开的时候就会加载进来，而userDetail组件则不会加载，需要点击addUser方法调用的时候，才会将此组件的所有资源加载出来，可以在浏览器的Network看得到当前组件加载的所有文件，这样一来，userList页面增加再多的组件，都可以通过异步组件的形式，不增加加载负担；
同样，组件下的子组件也同样做成异步组件；

3、减少公共入口main.js资源的引入

main.js

import Vue from 'vue'
import '@/styles/index.scss'
import App from './App'
import store from './store'
import router from './router'

除了必须要引入的模块，其他模块都不放在入口这里，减少公共入口加载资源时间；

4、webpack分块拆包

项目大了以后，打包优化是肯定少不了的，不然单文件太大了，加载会卡很久，比如常见的app.js和vendor.js文件，关于webpack的打包优化前已成文章，详细看：

chainWebpack之optimization.splitChunks的cacheGroups缓存组代码分块实践案

5、使用gzip压缩

文件压缩能大大减少文件大小，使加载提速，这个也已成文，详情看：

vue打包之compression-webpack-plugin实现gzip压缩

6、UI框架-组件按需使用

这个问题应该很容易理解，就是不要将ui库整个在main.js入口引入，而是在页面使用时，使用了哪些组件就在当前页面引入哪些组件，按需使用，也可大大减少资源加载负担，减少加载时间；

<template>
    <el-button @click="doClick">
    <el-select @change="doChange">
<template>
<script>
import { ElButton, ElSelect } from "element-ui"
export default {
    conponents:{
        ElButton，
        ElSelect
    }
}
<script>

7、使用cdn引用第三方库，减少代码体积；

在public文件夹下的index.html中引入线上cdn：

<script src="https://cdn.xxx.org/lodash/1.4.3/lodash.min.js"></script>
<script src="https://cdn.xxx.org/echarts/2.4.3/echarts.min.js"></script>
<script src="https://cdn.xxx.org/moment/3.4.3/moment.min.js"></script>

然后在vue.config.js里配置：

configureWebpack:{
    externals: {
        'echarts': 'echarts',
        'lodash': 'lodash',
        'moment': 'moment'
    }
}

但也不可过多在index.html引用，否则公共资源还是加载过多；

8、使用第三方库的时候不做全库引入

开发过程中常有因为需要使用某个库的其中一两个方法，而将整个库引进来的，比如 lodash，使用的时候建议只在需要使用的页面按需引入所使用的方法即可，不做全库引入：

import { cloneDeep } from "lodash"

其他

当然除了上面所说的几个，还有些其他细小的地方也可以进行系统性能提升优化：

1、index.html文件上也不做过多资源引入，全部放在具体页面去独立加载；
2、代码处理要有选择性的使用高性能方法，提高代码执行效率；
3、模块之间的耦合度，模块布局的合理分布，不把过多组件放在同一个页面或同一个模块等；
4、去掉动画或减少页面动画效果耗时；
5、后端的接口响应时间优化，合并接口，减少接口数量；
6、打包不生成ScoureMap文件；
7、打包移除console;
8、使用Worker多线程执行代码；
9、css多使用class少使用选择器；
10、使用字体icon代替图片；
11、图片压缩或少使用大图片；
12、computed钩子中少用this，多用解构变量，加快脚本执行速度；
…