gulp html 压缩,gulp-gzip压缩

压缩效果：

压缩前：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文件

原来：

修改后：

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文件

原来：

h5

...

修改后

h5

GzipJsFilter

net.app.util.GzipJsFilter

headers

Content-Encoding=gzip

GzipJsFilter

*.gzjs

...

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