壓縮效果：

壓縮前：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

總結

以上是生活随笔為你收集整理的gulp html 压缩,gulp-gzip压缩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。