了解gzip

最新推荐文章于 2024-03-16 08:58:42 发布

不吃饭会饿

最新推荐文章于 2024-03-16 08:58:42 发布

阅读量147

点赞数

分类专栏：前端

原文链接：https://www.cnblogs.com/yinblog/p/10658850.html

版权

前端专栏收录该内容

88 篇文章

订阅专栏

**做了个个人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、Firefox、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
　　　　　　}))
　　　　}
　　}
}

效果：

在这里插入图片描述