【vue加载16秒优化到2秒】Vue3加载慢的性能优化，打包后页面静态资源chunk-vendors文件过大加载慢响应慢

news2024/11/26 15:30:23

【写在前面】基于自己之前做vue3项目的时候发现了一个致命的问题，项目部署好了，但是加载起来反应慢半天，控制台一看才发现，有个chunk-vendors的js文件加载了十几秒，这无非是页面体验差到爆炸。今天就针对打包后静态资源文件加载过慢进行一个优化过程介绍。

彩蛋直通车

喜欢博主的可以支持一下哟，支持直接上皇榜，皇榜入口点击此处

1、加载性能差场景复现

首先在我打包后，访问我的页面，我发现特别卡，然后打开控制台一看，不得了，这个耗时直接惊呆了我，如下所示：
在这里插入图片描述
你说这样的访问谁受得了，看上面分析不难发现，其中加载时间很受size的影响，就拿chunk-vendors.js来说，光这个文件就1.1MB了，也难怪人家加载慢呢，所有说通过复现我们能够确定我们优化的方向了，具体看第二章节的分析。

2、页面优化过程及按需引入（黄大大推荐）

chunk-vendors.js等静态资源文件大小的优化

第一步：搞清楚问题出在哪？

首先我们应该搞明白的事情是为啥这个文件打包后会这么大？
核心原因是我们在build的时候所有的依赖包，都会打包到这个文件里面，比如说我们页面上用到了element-ui/element-plus、vant等三方组件的时候，其组件的一些样式和API函数都会被封装到chunk-vendors.js和chunk-vendors.css里面去，这个封装默认是全量的，所以说在写代码时候要注意的是，尽量别在main.js里面全量引入，如下所示：
在这里插入图片描述
这样的话挺坑自己的，当时本地运行还好，万一你打包上外网，存在一些网络延迟之类的环境，你的页面会被你自己玩坏了。

第二步、如何解决这个问题
首先针对main.js改成如下的方式，引入的地方注释掉，使用的地方删除掉：
在这里插入图片描述
其实使用组件按需导入的方式，如下所示，
先安装两个组件unplugin-vue-components 和 unplugin-auto-import安装命令如下：

npm install -D unplugin-vue-components unplugin-auto-import

安装成功后在vue.config.js里面添加如下两段代码：

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

和

plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]

从而实现了打包静态文件的大小优化，调整后重新打包发布如下所示：
在这里插入图片描述
从这里看不难发现，之前的16.5秒直接降到4.5秒的加载时间，想想就心里舒服，但是我黄某人是一个追求完美的人，这不那个图片居然花了我2.52秒，让我很不爽，这不开始下面就盘它。
第三步、图片文件的大小优化
在掏出我8年工作经验的PS技术，针对原有的图进行了处理，不影响原有的效果前提下我对这张图做了一个处理，由原来的354k直接把他干到了18k,这不我们再看看加载效果哟，这加载速度博尔特看了也得哭两天。
在这里插入图片描述

路由懒加载的优化

大家仔细一点就会发现，之前没有这些349.js、680.js之类的文件，这里我再说一下哈，为啥第一张截图没有这些东西，因为之前在路由转发的时候我把转发路径写成了一个变量，后面我直接在route直接指向了，因为这样的话能将业务文件进行单个模块加载，也是优化的一种方案。
这么说吧，一个5M的文件加载估计需要20-30秒，但是你把这5M的文件分解成10个500k的文件，那么一起的加载时间可能就是1.5*10=15秒，这个的话在一定程度上能做到优化。
如下所示的路由加载优化具体修改代码在router文件的index.js,摒弃原有的变量引入。

在这里插入图片描述

3、其他优化策略

3.1 局部引入（不推荐）

当然还有网友局部引入也不错啊，这个优化的话还可以去到具体的页面进行专门的组件引入，但是我觉得这种方式略微显得笨拙一些，但是对于一些有更大性能可以往下看看，我们不得已只能取消掉之前vue.config.js的优化。真是一朝回到解放前啊。

第一步、注释掉之前的按需引入

下面跟着我的步伐来实现吧，首先注释掉之前在vue.config.js添加的代码，如下：
在这里插入图片描述

第二步、找到指定的文件进行局部引入
如下所示：

import { ElTable,ElTableColumn } from 'element-plus'
import 'element-plus/theme-chalk/el-table.css'
import 'element-plus/theme-chalk/el-table-column.css'
import 'element-plus/theme-chalk/base.css'

components: { ElTable,ElTableColumn },