美文网首页
gulp-gzip压缩

gulp-gzip压缩

作者: Yowi | 来源:发表于2016-05-19 10:58 被阅读0次

压缩效果:
压缩前: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

相关文章

  • gulp-gzip压缩

    压缩效果:压缩前:app.js 17104kb压缩后:app.min.js.gz 758kb对比: 22.6 : ...

  • H264压缩技术

    帧内压缩技术 有损压缩 帧间压缩 有损压缩

  • 图片压缩

    Android图片压缩常用的有质量压缩、尺寸压缩、采样率压缩以及通过JNI调用libjpeg库来进行压缩(尺寸压缩...

  • shell命令整理(七)

    打包压缩 window打包压缩工具: linux打包压缩工具: 打包 解包 案例 压缩 解压缩 案例 打包压缩一起...

  • 10.压缩解压类

    压缩和解压类 压缩指令gzip,解压缩指令gunzipgzip 文件 // 压缩文件,只能压缩成....

  • iOS 图片压缩总结

    一.压缩方式和方法 1.压缩方式 1.1 质量压缩1.2 尺寸压缩1.3 质量和尺寸共同压缩 2.压缩方法 2.1...

  • Linux压缩命令

    .zip格式压缩与解压缩 .gz格式压缩与解压缩 .bz2格式压缩与解压缩 打包命令tar

  • zip压缩工具、tar打包、tar打包并压缩

    65 zip压缩工具 支持压缩目录 默认不支持解压windows下的rar文件 压缩、解压缩文件 压缩、解压缩目录...

  • day14 -文件压缩

    《 文件压缩 》zip压缩 格式 压缩工具 .zip ...

  • 压缩打包、gzip、bzip2、xz

    目录 一、压缩打包介绍二、gzip压缩工具三、bzip2压缩工具四、xz压缩工具 一、压缩打包介绍 简单的说,压缩...

网友评论

      本文标题:gulp-gzip压缩

      本文链接:https://www.haomeiwen.com/subject/pqqgrttx.html