Vue CLI 2&3 下的项目优化实践：CDN + G

2018-11-13 本文已影响64人简书超级会员

项目越做越大，到底项目打包完部署到服务器上访问加载速度很慢，本文就是为了解决这个问题。有更好的解决方案欢迎大家留言。我会及时更新文档。

前言

但随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。
尤其是 vendor.js, 甚至会达到 2M 左右。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。
为了解决这个问题，我做了一些探索，在几乎不需要改动业务代码的情况下。

找到了三种有明显效果的优化方案

一、CDN
二、Gzip
三、Prerender

一、首先考虑CDN 优化（简单粗暴）

构建后文件说明

1.app.css：压缩合并后的样式文件。
2.app.js：主要包含项目中的 App.vue、main.js、router、store 等业务代码。
3.vendor.js：主要包含项目依赖的诸如 vuex，axios 等第三方库的源码，这也是为什么这个文件如此之大的原因，下一步将探索如何优化这一块，毕竟随着项目的开发，依赖的库也能会越来越多。
4.mainfest.js：mainfest 的英文有清单、名单的意思，该文件包含了加载和处理路由模块的逻辑。

项目加载发现这两个文件较大，采用cdn优化

1 、将依赖的 vue、vue-router、vuex、element-ui 和 axios 这五个库，全部改为通过 CDN 链接获取，在index.html 里插入 js 和 css 的 BootCDN免费网址链接。

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>

2、添加webpack.config.js配置文件

  externals:{
    'vue-router': 'VueRouter',
    'vue': 'Vue',
    'axios': 'axios',
    'element-ui': 'ELEMENT',
    'vuex': 'Vuex',
  },

-3、卸载依赖的 npm 包，npm uninstall axios element-ui vue vue-router vuex；
-4、删除main文件里之前的引包方式

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'

import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'
import echarts from 'echarts'


Vue.use(ELEMENT)
Vue.use(VueRouter)

Vue.prototype.$http = utils.httpInit();
Vue.prototype.$WebSocket = utils.webSocketInit;
Vue.prototype.$echarts = echarts;
const router = new VueRouter({
  // mode: 'history',
  mode: 'hash',    //路由的模式
  routes
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

优化前：

优化后：

发现vendor这个文件只有144bytes，index

文件	优化前	优化后
vendor.js	1.52M	144bytes
index.js	5.29M	3.86M

二、Gzip 优化

使用 Gzip 两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。
1.如何开启 gzip 压缩
开启 gzip 的方式主要是通过修改服务器配置，以 nginx 服务器为例。
下图是使用同一套代码，在仅改变服务器的 gzip 开关状态的情况下的 Network 对比图：

未开启 gzip 压缩：

开启 gzip 压缩：

开启 gzip 压缩后的响应头：

从上图可以明显看出开启 gzip 前后，文件大小有三四倍的差距，加载速度也从原来的 7 秒多，提升到 3 秒多。

附上 nginx 的配置方式：

http {
  gzip on;
  gzip_static on;
  gzip_min_length 1024;
  gzip_buffers 4 16k;
  gzip_comp_level 2;
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
  gzip_vary off;
  gzip_disable "MSIE [1-6]\.";
}

我们都知道config/index.js里有一个productionGzip的选项，那么它是做什么用的？

我们尝试执行npm install --save-dev compression-webpack-plugin@1.x, 并把productionGzip设置为true，重新build，放在 nginx 服务器下，看看有什么区别：

我们会发现构建之后的文件多了一些 js.gz 和 css.gz 的文件，而且 vendor.js 变得更小了。

这其实是因为我们开启了 nginx 的 gzip_static on; 选项，如果 gzip_static 设置为 on, 那么就会使用同名的.gz 文件，不会占用服务器的 CPU 资源去压缩。