壓縮效果：
壓縮前：app.js 17104kb
壓縮后：app.min.js.gz 758kb
對比： 22.6 : 1
壓縮步驟：
（1）var gzip = require('gulp-gzip');
源文件：app.js 17104kb
第一層壓縮：.pipe(uglify()) --> app.min.js 2597kb
第二層壓縮：.pipe(gzip()) --> app.min.js.gz 758kb
（2）修改tomcat的\conf\server.xml文件
原來：
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />
修改后：
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"
compression="on"
compressionMinSize="2048"
noCompressionUserAgents="gozilla,traviata"
compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain,application/json,application/x-javascript" />
說明：
1) compression="on" 打開壓縮功能
2) compressionMinSize="2048" 啟用壓縮的輸出內(nèi)容大小挤聘，這里面默認為2KB
3) noCompressionUserAgents="gozilla, traviata" 對于以下的瀏覽器攒钳，不啟用壓縮&<60;
4) compressableMimeType="text/html,text/xml" 壓縮類型
（3）調(diào)用
如果直接在html文件調(diào)用.gz文件的話是不行的【Uncaught SyntaxError: Invalid or unexpected token】
所以打開eclipse新建項目
1) 新建一個web project h5項目
2) 導入你的全部文件
3）將【app.min.js.gz】修改為【app.min.gzjs】 同理 html文件調(diào)用就像調(diào)用普通js一樣調(diào)用這個.gzjs文件
4）新建一個java class GzipJsFilter
package net.app.util;
import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GzipJsFilter
implements Filter
{
Map headers = new HashMap();
public void destroy() { }
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
if (req instanceof HttpServletRequest)
doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);
else
chain.doFilter(req, res);
}
public void doFilter(HttpServletRequest request, HttpServletResponse response,
FilterChain chain)
throws IOException, ServletException
{
request.setCharacterEncoding("UTF-8");
for (Iterator it = this.headers.entrySet().iterator(); it.hasNext(); ) {
Map.Entry entry = (Map.Entry)it.next();
response.addHeader((String)entry.getKey(), (String)entry.getValue());
}
chain.doFilter(request, response);
}
public void init(FilterConfig config) throws ServletException {
String headersStr = config.getInitParameter("headers");
String[] headers = headersStr.split(",");
for (int i = 0; i < headers.length; ++i) {
String[] temp = headers[i].split("=");
this.headers.put(temp[0].trim(), temp[1].trim());
}
}
}
4) 修改web.xml文件
原來：
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<display-name>h5</display-name>
<welcome-file-list>
...
</welcome-file-list>
</web-app>
修改后
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<display-name>h5</display-name>
<filter>
<filter-name>GzipJsFilter</filter-name>
<filter-class>net.app.util.GzipJsFilter</filter-class>
<init-param>
<param-name>headers</param-name>
<param-value>Content-Encoding=gzip</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>GzipJsFilter</filter-name>
<url-pattern>*.gzjs</url-pattern>
</filter-mapping>
<welcome-file-list>
...
</welcome-file-list>
</web-app>
5) 打包h5項目放在tomcat即可
（4）請求信息
Request URL:http://localhost:8080/h5/js/app.min.gzjs
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8080
【Response Headers】
view source
Accept-Ranges:bytes
Content-Encoding:gzip
Content-Length:775487
Date:Thu, 19 May 2016 02:30:44 GMT
ETag:W/"775487-1463623870000"
Last-Modified:Thu, 19 May 2016 02:11:10 GMT
Server:Apache-Coyote/1.1
【Request Headers】
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8080
Pragma:no-cache
Referer:http://localhost:8080/h5/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2700.0 Safari/537.36