老生常谈-vue页面加载速度优化

昨晚加班上线，折腾到半夜，下午来了之后总算能清闲一些，搞一些非业务的东西来充实下自己。正好昨天上线时发现项目中有个h5手机端页面，首屏加载非常缓慢。决定优化下

现状

测试环境下，在chrome打开页面，加载需要将近13s，才加载完。下载了4M的资源包。

备份

为了不影响测试环境，肯定要自己搭建一个环境来测试优化效果。此处，明总的服务器又体现出效果了，白嫖的快乐。

然后再本地单独开一个测试分支，方便后续跟进

开始

1. 测试环境，静态资源404

没想到开始就在测试环境碰到了坑，打包出的页面无法访问到静态资源，全部404了。排查发现，默认打包访问的是根目录，而我为了不影响明总服务器别的项目，在目录下新建了子目录来存放页面代码，访问根目录肯定是不行的，然后找到vue.config.js 开始修改打包目录

module.exports = {
...
// 此处由/ 修改为./
publicPath: './', // 设置打包文件相对路径
....

}

2. 测试环境访问白屏

修改为相对路径后，静态资源成功请求到，但是页面出现了白屏，就非常奇怪。控制台没有报错，静态资源js、css都加载成功。页面展示依然空白。而且并不会出现路由的后缀。

于是检查了下router，发现这个项目route使用的是history模式，由于对这个模式用的比较少，但是好在有了关键字，直接搜索相关问题，发现还是目录问题：

history下，如果非根目录，要配置base，具体解决方案参考这篇，我就不详细描述了

思路

首屏加载，我的思路还是几个比较常见的：

1. gzip 开启后打包后的文件会小非常多。但是需要服务端支持（nginx或者别的）

排查发现，目前项目中已经支持gzip方式打包，nginx也已经配置

2. 第三方资源包拆分，将项目中依赖的第三方包单独拆出来，能使用cdn的使用cdn加载，降低服务器出带宽

目前还不了解公司是否有类似资源，所以这种方式加载基础包暂不考虑

3. 页面懒加载，路由只在使用的时候加载

首先排查了route。额... 发现的确是同步的方式去写的，

// 修改前
...
import NewMerc from '@/views/LoginInfo/NewMerc.vue'
...
{
     path: '/newMerc',
     name: 'newMerc',
     component: NewMerc
   },
// 修改后
{
     path: '/newMerc',
     name: 'newMerc',
     component: () => import('@/views/LoginInfo/NewMerc.vue')
   },

修改后，将单个js打包为了个多个页面js，通过动态加载来解决首屏展示慢的问题。但是发现，打包后的页面，虽然分成了很多个小的js，但是依然是全部加载了。

想起来这是prefetch插件的问题，prefetch会预加载一些需要的js文件，优化后续的页面加载速度，但是会导致首屏加载所有的分包。嗯，暂时修改下吧

// vue.config.js
  chainWebpack: config => {
    config.plugins.delete('prefetch')
  }

我是直接将插件移除了。这个视项目情况而定。

4. 项目中代码依赖优化，使用webpack-bundle-analyzer插件，查看项目中文件大小占比较高的组件，对应去做处理。由于我这边是vue-cli3 自带分析功能，所以直接运行：

	vue-cli-service build --report

即可打包出一个分析依赖可视化页面。在dist中找到report.html文件打开

这个时候就发现问题了，很明显 pdfh5 这个插件占比很重，但是由于是在子页面，前边在加过路由懒加载后，首屏并不会加载该组件，所以暂时往后放一下。先解决首屏问题(chunk-vendor.js)中的组件大小，仔细查看，

1. 加载了moment中所有的语言包。但是项目中并没有国际化的需求，所以这是个优化点，目前gzip后将近80KB
   1. vue.config 中在configureWebpack下添加

   configureWebpack: config => {
       config.plugins.push(
         new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
       )
     }
   

   加了优化之后，体积明显变小，gzip后只有18KB。
2. 各种 基础包 vue、vuex、vue-router之类的。这种也可以单独拎出来通过cdn方式加载，只是目前还不了解公司是否有类似资源，

5. 图片类

图片相关的，说大不大，说小也不小，可能辛辛苦苦将代码改好，一张大图片就又回到解放前。
推荐一个图片无损压缩网站（[https://tinypng.com/](https://tinypng.com/)）还挺好用的
将项目中的大图片压缩下，我这边最高压缩了将近70%的大小

成果

目前做完这些后，虽然受资源限制，还没有完全优化完，但是那些是更细致的优化，精益求精，目前的大头都已经做完，优化后，首屏加载1.86s，资源包378k。缩减了将近10倍的时间