做了个个人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
}))
}
}
}
效果：
gzip压缩
原文：https://www.cnblogs.com/yinblog/p/10658850.html
