做了个个人vue项目，一上线首页加载时间10~20s，这加载速度简直不能忍。

 

特别是一个chunk-vendors.js，大小达到了800k+，而且还要这个js载入完才显示首页图片。

于是查了很多资料无外乎从这几点入手优化；

1、路由懒加载

2、gzip

3、cdn

4、图片的处理（css精灵这类的），总之就是把小图片弄到一起，达到减少请求的目的

5、其他

 

我看了看，感觉其实对于优化效果影响最大的应该是gzip、cdn、图片的处理。

然而我这个小项目图片并不多，自己也进行了图片的大小处理，除了2张图片超过200k，其他都是200k一下所以这一块暂且不优化了。

 

重点是gzip和cdn。

cdn暂且先不弄，那么最大的优化点就是gzip了。

 

网上查了一下资料发现gizp大概是这么个玩意：

gzip是GNUzip的缩写，它是一个GNU*软件的文件压缩程序。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。

总结：总之就是能实现压缩文件功能的一个东西、技术

 

知道这么回事了，但要怎么用呢？

经过查询发现使用gzip一共有3个方面的配置和要求

1、配置服务端使用gzip

2、浏览器要支持gzip （现代浏览器都支持，比如：chrome、firebox、safari...）

3、配置前端使用gzip

 

由于我服务端使用koa框架写的，于是乎查到了

Koa Compress

它的使用方法很简单：

1、npm i koa-compress

 

2、

var compress = require('koa-compress') var Koa = require('koa')   var app = new Koa() app.use(compress({   filter: function (content_type) {    return /text/i.test(content_type)   },   threshold: 2048, //阈值 1024为1kb以上就压缩   flush: require('zlib').Z_SYNC_FLUSH }))   最后就是配置前端了： 1、安装插件 cnpm i --save-dev compression-webpack-plugin   2、在vue.config.js 中加入 const CompressionWebpackPlugin = require('compression-webpack-plugin'); const productionGzipExtensions = ['js', 'css']; const isProduction = process.env.NODE_ENV === 'production';   module.exports = { 　　configureWebpack: config => { 　　　　　　if (isProduction) { 　　　　　　config.plugins.push(new CompressionWebpackPlugin({ 　　　　　　algorithm: 'gzip', 　　　　　　test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), 　　　　　　threshold: 10240, 　　　　　　minRatio: 0.8 　　　　　　})) 　　　　} 　　} }

 

效果：