本文首发于个人公众号【Java技术大杂烩】，欢迎关注。

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

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

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

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

优化之前

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

可以看到：

1. 总耗时 4.33 秒。
2. app.css 文件大小为 1.1 MB，耗时 2.42秒。
3. vendor.js文件大小为 434 KB，耗时 1.26秒。
4. app.js文件大小 144 KB，耗时 598毫秒。
5. 一张 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 的文件.

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

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

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

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

3. 把 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)
    }
  ]
})

方法四：较大图片进行压缩

在文章开头说的优化之前的加载耗时中，有张图片是 png格式的，大小为347 KB，耗时1.51秒:

优化的办法就是进行图片的压缩，改为 jpg的，大小为 199 KB，最后耗时 241 毫秒。

总结

通过上述的几个方法优化之后，首页的加载耗时情况如下所示：

可以看到：

1. 总耗时 1.75 秒。
2. app.css 文件大小为 300 KB，耗时 887毫秒。
3. vendor.js文件大小为 131 KB，耗时 610毫秒。
4. app.js文件大小 30.7 KB，耗时 342毫秒。
5. 图片大小 119 KB，耗时 241毫秒。

在测试环境上多次测试后，平均下来，首页的加载速度从4秒左右提高到2秒左右。

「完」