gzip压缩

一、背景　

　   线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。

　　压缩通过减少http响应的大小来减少响应时间。如果Http请求得到更小的响应，服务器和浏览器之间就会有更少的包被传送，传输时间就减少了。

二、gzip压缩原理

　　从Http/1.1开始，浏览器通过在http请求头中添加Accept-Encoding头来支持压缩：

Accept-Encoding: gzip,deflate

　　如果web服务器从请求头中发现Accept-Encoding头，它可能使用Accept-Encoding指定的压缩算法列表中的一个来压缩响应。

　　web服务器通过响应头中的Content-Encoding头来通知浏览器响应内容使用了哪种压缩算法：

Content-Encoding:gzip

三、需要被压缩的文件

 　  应该压缩js脚本和CSS样式文件（事实上压缩任何text类型的响应，包括XML和JSON都是可以的）。

　　图片和PDF文件不应该被压缩，因为他们已经是压缩的了，压缩他们会浪费CPU资源而且可能增加文件大小。

　　压缩有一项成本:它会带来额外的服务器端压缩和客户端解压缩的CPU资源。为了权衡利弊，你需要去考虑响应的大小，网络的带宽，以及服务器和浏览器之间的网络距离等因素，这些信息通常是不容易获取的。所以，一般对于超过1k或者2k的文件都是值得去压缩的。

四、启用gzip

1.node端

　　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)
}

　　如果用的是koa，用法和上面的差不多：

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

　　因为node读取的是生成目录中的文件，所以要先用webpack等其他工具进行压缩成gzip，webpack的配置如下：

const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(
    new CompressionWebpackPlugin({
        asset: '[path].gz[query]',// 目标文件名
        algorithm: 'gzip',// 使用gzip压缩
        test: new RegExp(
            '\\.(js|css)$' // 压缩 js 与 css
        ),
        threshold: 10240,// 资源文件大于10240B=10kB时会被压缩
        minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩
    })
);

2.tomcat

　　找到tomcat的server.xml文件，找到其中Connector节点然后进行配置修改，具体配置如下：

<Connectorport="80"
protocol="HTTP/1.1" 
connectionTimeout="20000" 
redirectPort="8443" 
URIEncoding="UTF-8" 
maxPostSize="0" 
useBodyEncodingForURI="true"compression="on" 
compressionMinSize="2048" 
noCompressionUserAgents="gozilla, traviata" 
compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>

　　参数说明：

• compression="on" 打开压缩功能
• compressionMinSize="2048" 启用压缩的输出内容大小，当被压缩对象的大小>=该值时才会被压缩，这里面默认为2KB
• noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器，不启用压缩
• compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 压缩类型

　　注意：tomcat7以后，js文件的mimetype类型变为了application/javascript，而在tomcat7以下则为text/javascript;具体的tomcat7定义的类型可以在：conf/web.xml文件中找到。

　　可以在web.xml下搜索，如我搜索javascript会找到如下代码：

<mime-mapping>
    <extension>js</extension>
    <mime-type>application/javascript</mime-type>
</mime-mapping>