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

Posted 2023-04-09 拄杖盲学轻声码

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

然后再重新build之后再看看页面是否能加载出来，是否有时间上的缩短？这种方式比较大的缺陷就是样式用的多就要各种穷举，比较的累。

第三步、看效果骂人

时间没小就算了，还花了我不少时间，我当时就蹦不住了，怕了怕了。

3.2 cdn引入（坑区勿入）

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

4、片尾彩蛋

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

Vue之性能优化篇

Vue众所周知，是一个轻量级的框架，源码仅仅为72.9KB，但是也有它自己的缺点，就是首屏加载会比较慢，因为和传统项目相比，Vue会在首屏加载的时候加载出所有的组件和插件，并且向服务器请求数据，导致可能有时候首屏加载的时间就会到4、5秒的样子。

但是这样做很明显是在挑战用户的耐心，按照惯例，最好能把加载时间控制在1秒左右。接下来小编讲一下Vue性能优化的两个个方向。

一．源码优化

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

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

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

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

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

二．打包优化

1、修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。

2、使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

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

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

三、总结

这篇文章小编大概细化了一下关于Vue的一些优化方向，大家一定要记得，对于前端这个岗位来说，性能优化是一个很重要的点，为了让用户体有更好的体验，大家在提升自己技能的同时也要关注这些细小的方面~