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秒的加载时间。

路由懒加载的优化

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