压缩效果:
压缩前: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" 启用压缩的输出内容大小,这里面默认为2KB
3) noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器,不启用压缩&<60;
4) compressableMimeType="text/html,text/xml" 压缩类型
(3)调用
如果直接在html文件调用.gz文件的话是不行的【Uncaught SyntaxError: Invalid or unexpected token】
所以打开eclipse新建项目
1) 新建一个web project h5项目
2) 导入你的全部文件
3)将【app.min.js.gz】修改为【app.min.gzjs】 同理 html文件调用就像调用普通js一样调用这个.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
网友评论