gulp-gzip压缩

2016-05-19  本文已影响0人  Yowi

压缩效果:
压缩前: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
上一篇 下一篇

猜你喜欢

热点阅读