vue2应用性能优化：首屏FCP指标提升约80%

vue2性能优化

发布日期: 2023-04-16

文章字数: 1.6k

阅读时长: 6 分

背景

一个vue2的项目，打包部署后，发现首屏加载速度慢，FCP白屏时间大约需要8s左右，从输入系统地址按下回车后，就一直转啊转啊转，加载缓慢，导致用户的体验非常不好！所以今天针对这个问题来做一些性能优化。

期望的结果就是首屏加载速度快一点，白屏时间缩短，从而提升用户体验。

项目优化的方式、方向有很多。本文记录了我自己在项目中实践的一些优化操作，各项关键指标得到明显提升。

性能优化的重要性

无论是在开发 Web 应用还是移动应用，优化项目和性能优化都是至关重要的。

优化项目
可以使我们更高效地组织和管理代码，提高代码质量和可读性，并确保应用程序的稳定性和可维护性。
性能优化
针对性的性能优化，可以提高应用程序的响应速度、提高页面加载速度和用户体验，从而吸引更多用户并提高用户留存率。

【优化前】性能表现

优化前入口文件体积

所有chunks总大小为 11.9 MB
首屏使用文件大小
chunk-vendors: 3.79 MB
index.js：2.37 MB

图片相关

项目使用了url-loader处理图片，压缩指定大小图片，减少http请求。但是这一步处理完后发现我们的js文件体积变大了，这是因为部分图片被打包到了js中，不着急，我们接着优化。

all(12.59mb)
chunk-vendors：3.79mb
index.xxx.js：大小 2.91mb

第三方插件优化

剔除pafmake、xlsx

仔细观察我发现上面打包出的chunk里有一个pafmake、xlsx 文件、我的项目是没有安装这个依赖的，仔细排查后发现是项目中使用了 amecharts库、而它就是其子依赖，其中还包含了 xlsx，我们是用不到这两个依赖的，所以要干掉他们！通过 webpack 的 externals 进行判断后剔除。

moment 优化

我的项目中只用到了moment的中文包、但是它默认会把所有语言都打包进来了，所以我们要剔除其他的语言包减少依赖

     plugins: [
        // 剔除moment的其他语言包
        new webpack.ContextReplacementPlugin(
          /moment[/\\]locale$/, // 替换的模块名称正则表达式
          /zh-cn/ // 替换模块的上下文路径
        ),
      ]

这一步优化后打包：
all(9.89mb)
chunk-vendors：3.56mb
index.xxx.js：大小 2.91mb

【优化中】的性能表现

大体积无用文件处理

仔细观察项目后发现有一个不小的json文件、还有一个文件夹下注册了很多的弹出组件，且经过排查发现这些组件在项目中是没有用到的！这里不清楚之前这里要做什么，所以这里我就先直接注释掉。

路由懒加载（关键）

仔细观察index.xxx.js文件发现很多文件是首页没有用到的页面，但是也被打包了进来，导致体积高达2.91mb
因为项目页面比较多，我对路由进行了重构，全部采用路由赖加载处理。

路由懒加载中遇到的问题

使用魔法注释方式
```
  component: () => import(/* webpackChunkName: "[request]" */ `@/views/${path}.vue`)
```
最先开始我使用这种方式，通过魔法注释加载路由。由于路由页面比较多，写了一个方法动态去生成上面这段代码，但是项目中报错提示如下：

项目打包后也直接报错提示找不到对应文件，反复确认过这个动态路由的路径是对的。
import动态引入
尝试直接import动态引入也是不行的
```
  component: () => import(`@/views/${path}.vue`)
```
网上也有说使用@babel/plugin-syntax-dynamic-import插件可以支持解析动态语法，我尝试后还是会报错。如果有朋友有好的解决方法欢迎评论区指点！
查询资料也有说 webpack4 不支持路由动态变量引入的方式。

此时，在想要是vue3环境就好了，有专门的异步api很方便。所以这里我只好乖乖的一个一个静态去引入路由了。