Vue加载优化，速度提高一倍。

Java技术编程

发布于 2020-06-10 10:39:36

1.4K0

发布于 2020-06-10 10:39:36

前言

之前做的一个Vue项目，流程大概是这这样的：从公众号进入，由外系统获取用户的openid等信息，然后再跳转到项目首页进行加载初始化操作。

业务最近反应进入首页很慢，于是大致排查了下，由于外系统需要去微信获取用户授权，用户的的openid，调用定位接口获取位置等信息，想着会不会是他们的问题，经过沟通，他们也是按照微信的接口文档进行操作，没有什么优化的空间，于是想着能不能提高我们首页的加载速度，百度一番，果然有相应的优化方法，

主要有以下几个方法：

打包的时候不生成 「.map」 文件。
打包的时候生成 gzip 文件，部署的时候，让 「nginx」直接读取 gzip 文件。
路由加载的时候采用「懒加载模式」。
首页较大的图片适当的进行压缩。
三方库采用「CDN」的方式引入。

由于「CDN」的方式改动较多，所以这次优化没有采用该方法，而是采用了其他四种方法，在测试环境上进行测试加载速度提高了一倍，加载时间从4秒减少到2秒，在生产上网络较好应该要快些。下面来依次介绍下这几种方法的具体操作。

分析文件大小

在开始操作具体的优化方法之前，先来分析下哪些代码文件比较大，较大的文件可以进行压缩，使用 webpack-bundle-analyzer 来进行分析。

首先执行 「npm install cross-env --save-dev」 安装 cross-env 依赖。
在 package.json 文件的 scripts 下面加上:

"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"

如下图所示：

在项目的根目录下执行「npm run analyze」 命令，执行之后，在浏览器上会自动打开一个页面，显示项目具体的文件及大小，如下图：

可以看到，项目中vendor.js文件最大，为 184.9 KB，该文件是Vue打包的时候自动生成的；通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的，如果没有使用可以进行删除。

此外，把鼠标移到某个文件上面，还可以看到提示如果采用 gzip 压缩后的大小，比如vendor.js提示如果采用 gzip 进行压缩，压缩后的大小为61.26 KB，文件变小了，加载速度自然就快了嘛。

优化之前

先来看看优化之前的加载耗时情况：

可以看到：

总耗时 4.33 秒。
app.css 文件大小为 1.1 MB，耗时2.42秒。
vendor.js文件大小为434 KB，耗时1.26秒。
app.js文件大小144 KB，耗时598毫秒。
一张 png 图片大小347 KB，耗时1.51秒。

到后台查数据的耗时反而很小，225毫秒。

开始优化

接下来，开始按照文章开篇的办法进行操作。

方法一：不生成 .map 文件

一般我们上生产的代码都会经过压缩，去空格，babel编译转化。然而压缩转化之后的代码和源代码之间的差异很大，当出现问题的时候会造成无法 DEBUG的问题，而编译后的 .map 文件主要是我们用来进行错误定位的。

了解了.map文件作用之后，我们在本地开发测试的时候可以使用.map来进行调试，上生产了之后，bug基本修改完毕，所以在编译打包的时候可以不生成.map文件。

在编译打包的时候，.map文件的生成是由 config/index.js文件的 「productionSourceMap」属性来控制的，为true的时候，会生成.map文件，为false的时候，不会生成.map文件，默认为true。

所以我们把该属性设置为 false，编译打包的时候就不会生成.map文件了。

方法二：采用 gzip 压缩

还记得在文章开篇提到的用webpack-bundle-analyzer来分析文件大小吗，把鼠标移到某个文件上面，会提示现在文件的大小是多少，gzip压缩之后文件的大小，

要想进行 gzip压缩，首先在编译打包的时候，要生成.gz文件，然后 nginx 配置需要把 gzip模式 打开，访问项目的时候，自动会找到 .gz 的文件.

首先安装压缩插件，在项目根目录下执行如下命令安装：

npm install --save-dev compression-webpack-plugin

然后把 config/index.js文件的 「productionGzip」属性设置为true。

图片中注释也写清楚了，设置为true之前先执行上述命令安装插件。

把 build/webpack.prod.conf.js文件中的asset改为filename:

经过上面一系列操作之后，执行 npm run build 命令打包，此时在 dist 下会生成很多的 .gz文件，会比压缩之前的文件小了很多。

4. 现在生成了 .gz文件之后，还需要配置 nginx 开启 gzip 模块，访问项目的时候，自动会找到 .gz 的文件。nginx 配置如下：

http{
 gzip on;
 gzip_disable "msie6";
 gzip_vary on;
 gzip_proxied any;
 gzip_comp_level 8;
 gzip_buffers 16 8k;
 gzip_min_length 100; 
 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

「======有坑=======」

这里有一点要注意，安装 compression-webpack-plugin 插件之前，先到 package.json文件中看下你项目的 webpack的版本是多少，目前最新版需要运行在webpack4.0以上，如果你的webpack的版本号是3.x的，则安装compression-webpack-plugin 的时候，需要安装1.x的版本。

我之前也是直接执行上面的命令安装，这样安装的是最新的版本，最新版本则要求webpack的版本在 4.0 以上，而我的webpack则是 3.6 的，所以我卸载了再重新指定安装了 1.1.12 版本的。命令如下：

npm install --save-dev compression-webpack-plugin@1.1.12

方法三：路由采用懒加载模式

路由的懒加载模式可以解决首次加载资源过多导致的速度缓慢问题：vue-router支持WebPack内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进bundles里，只需要在路由被访问时按需加载即可。

之前项目上采用的是非懒加载模式，即如下写法：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/views/index'
import userList from '@/views/userList'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/c',
      name: 'chargeTypeList',
      component: userList
    }
  ]
})

优化的时候，把它改为赖加载模式，即如下写法：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: resolve => require(['@/views/index'], resolve)
    },
    {
      path: '/c',
      name: 'chargeTypeList',
      component: resolve => require(['@/views/userList'], resolve)
    }
  ]
})