您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-03-29
后台-插件-广告管理-内容页头部广告(手机)

【写在前面】基于自己之前做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
  • 1

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

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

plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

从而实现了打包静态文件的大小优化,调整后重新打包发布如下所示:
在这里插入图片描述
从这里看不难发现,之前的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 },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述
然后再重新build之后再看看页面是否能加载出来,是否有时间上的缩短?这种方式比较大的缺陷就是样式用的多就要各种穷举,比较的累。

第三步、看效果骂人
在这里插入图片描述
时间没小就算了,还花了我不少时间,我当时就蹦不住了,怕了怕了。

3.2 cdn引入(坑区勿入)

这方式其实也取决于第三方外网的依赖,相当于你去引用在线的一些样式和js文件,特别容易受网络影响,不建议大家去做,具体的实现你们可以百度试试看。

4、片尾彩蛋

特备皇榜等您来上!
如果觉得这篇文章给您带来帮助,喜欢支持博主的可以点击此处上皇榜!

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索