05月22, 2019

webpack、nginx配置gzip压缩,提升网页访问速度

js文件打包后有1.3M大,其实不算很大,无奈与公司网络太差,导致访问时间太长,所以准备开启gzip压缩,来提升访问速度

webpack配置: 依赖插件 npm install --save-dev compression-webpack-plugin

git 地址:compression-webpack-plugin

var CompressionWebpackPlugin = require('compression-webpack-plugin');

//在 plugin 中添加
new CompressionWebpackPlugin({ //gzip 压缩
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp(
        '\\.(js|css)$'    //压缩 js 与 css
    ),
    threshold: 10240,
    minRatio: 0.8
})

由于项目很旧了,所以无法直接使用最新版本,所以我指定版本安装,使用以下命令:

yarn add compression-webpack-plugin@1.1.12

这样打包后,就生成了.js.gz文件了 alt

打包好文件后,就是使用的问题了,接下来我们分别在node、nginx配置

nginx使用

gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{…..}之间

  • gzip on
    on为启用,off为关闭
  • gzip_min_length 1k
    设置允许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。
  • gzip_buffers 4 16k
    获取多少内存用于缓存压缩结果,‘4 16k’表示以16k*4为单位获得
  • gzip_comp_level 5
    gzip压缩比(1~9),越小压缩效果越差,但是越大处理越慢,所以一般取中间值;
  • gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
    对特定的MIME类型生效,其中'text/html’被系统强制启用
  • gzip_http_version 1.1
    识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
  • gzip_vary on
    启用应答头"Vary: Accept-Encoding"
  • gzip_proxied off
    nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
  • gzip_disable msie6
    (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

代码如下

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

node express使用

node端很简单,只要加上compress模块即可,代码如下

var compression = require('compression')
var app = express();

//尽量在其他中间件前使用compression
app.use(compression());
//这是基本用法,如果还要对请求进行过滤的话,还要加上

app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
  if (req.headers['x-no-compression']) {
    // 这里就过滤掉了请求头包含'x-no-compression'
    return false
  }

  return compression.filter(req, res)
}

node koa使用

const compress = require('koa-compress');
const app = module.exports = new Koa();
app.use(compress());

本文链接:http://h88829.top/post/gaip-webpack.html

-- EOF --

Comments