vue设置gzip打包压缩
当前端项目过大时,可以利用nginx请求配置和webpack来使用gzip压缩功能;
Web服务器和浏览器之间压缩传输的”文本内容“的方法。 HTTP采用通用的压缩算法,比如gzip来压缩HTML,Javascript, CSS文件。 能大大减少网络传输的数据量,提高了用户显示网页的速度。当然,同时会增加一点点服务器的开销。 本文从HTTP协议的角度,来理解HTTP压缩这个概念。
一、 安装webpack插件 compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
二、配置压缩选项
需要在config 配置gzip参数
build: {
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true, //压缩开关
productionGzipExtensions: ['js', 'css'],
}
还需要配置bulid/webpack.prod.conf.js 文件
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
// asset: '[path].gz[query]',
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
至此,vue部分的配置完成。可以使用npm run build后就会发现打包后的js文件都以gz后缀,即打包成功,打包好后会发现体积明显跟未压缩明显减少
三、nginx配置
在配置完Vue部分后直接部署到nginx上是不会生效的,还必须打开nginx的gzip功能才可以。这里以nginx-1.13.0为例,首先需要确认当前nginx是否拥有
gzip模块,一般情况下都会默认安装对应。运行以下命令
nginx -V 返回结果中会包含当前nginx启用了那些模块
如果返回结果中不包含gzip模块的话,可以重新编译nginx并安装相对应模块,找到nginx源码文件包,运行./configure --with-所需要安装的模块名
在确认模块安装完毕之后,修改conf/nginx.conf文件,加入如下内容
#开启gzip功能
gzip on;
#开启gzip静态压缩功能
gzip_static on;
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.1;
#gzip 压缩级别 1-10
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;# 是否在http header中添加Vary: Accept-Encoding,建议开启gzip_vary on;
PS:
nginx在设置了gzip on 后就已经打开了gzip压缩功能,不过这时候nginx所使用的是动态压缩。在动态压缩的情况下nginx会自动的将文件压缩成.gz文件,这时候就算不配置vue也能达到一样的效果。
但是动态压缩无疑会占用服务器的资源来进行此操作。
相对的nginx提供了静态压缩模式,也就是gzip_static,在这个模式下nginx会去寻找对应文件的.gz文件,只有.gz文件不存在的时候才会去压缩对应文件。这样就不会过度占用服务器资源。
gzip_static功能依赖http_gzip_static_module 模块,一般不会默认安装此模块,可以使用上文提到的方法安装。
四、egg中间件压缩配置
在egg2.0的洋葱模型中中可以轻易配置中间件,可以轻松实现请求压缩
在中间件middleware 文件新增gizp.js,配置请求时会自动打包请求内容
/**
* 请求压缩
* @type {isJSON}
*/
const isJSON = require('koa-is-json');
const zlib = require('zlib');
module.exports = options => {
return async function gzip(ctx,next) {
await next();
// 后续中间件执行完成后将响应体转换成 gzip
let body = ctx.body;
if (!body) return;
// 支持 options.threshold
if (options.threshold && ctx.length < options.threshold) return;
if (isJSON(body)) body = JSON.stringify(body);
// 设置 gzip body,修正响应头
const stream = zlib.createGzip();
stream.end(body);
ctx.body = stream;
ctx.set('Content-Encoding', 'gzip');
};
};
在config/config.default.js 文件中配置中间加载
// 配置需要的中间件,数组顺序即为中间件的加载顺序
middleware: ['closeHandler','saveSession','errorHandler','gzip'],