您的位置：首页 > Web前端 > CSS

js、css文件gzip静态压缩以及gzip动态压缩

2015-11-17 16:03 1201 查看



静态压缩


一、如何下载GZIP，及使用GZIP？

：1.下载地址：www.gzip.org 下载最新GZIP工具包，主要的就是gzip.exe可执行程序。

2.在下载的gzip文件加中有一个关于执行gzip程序相关选项信息的DOC文档。

3.我们主要使用gzip对js文件进行压缩处理。当你想执行压缩操作的时候你只需简单的将js文件拖动到gzip.exe文件上，命令窗口闪过便会在你的js文件目录中看见

一个xx.js.gz的压缩文件包，之后我们将xx.js.gz重命名为xx.gzjs.

如果你需要在执行压缩的时候带参数选项，你可以在cmd中输入 gzip [options] 压缩文件名（同目录不需要写路径） [压缩后的文件名称] 即可。


二、拦截压缩文件配置请求响应信息。

：为什么要拦截？为了配置请求响应信息，告诉浏览器文件类型。让浏览器自动解压缩文件。

代码如下：

JavaCode：

Java代码


package org.viancent.filter.gzfilter;

import java.util.*;

import java.io.IOException;

import javax.servlet.*;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("unchecked")

public class GzFilter implements Filter {

private Map headers = new HashMap();

@Override

public void destroy() {

}

@Override

public void doFilter(ServletRequest request, ServletResponse response,

FilterChain chain) throws IOException, ServletException {

// 判断request的类型

if (request instanceof HttpServletRequest) {

// 强制转换请求类型，调用doFilter重载方法向响应头部添加配置信息

doFilter((HttpServletRequest) request,

(HttpServletResponse) response, chain);

} else {

// 执行下一步

chain.doFilter(request, response);

}

/*

* 这里是第二种简易写法，直接进行响应头信息设置。使用这种写法便不需要在web.xml中配置初始化参数等等。 缺点就是灵活性不够

*/

// ((HttpServletResponse) response).setHeader("Content-Encoding",

// "gzip");

// chain.doFilter(request, response);

}

public void doFilter(HttpServletRequest request,

HttpServletResponse response, FilterChain chain)

throws IOException, ServletException {

// 设置请求的编码格式

request.setCharacterEncoding("GBK");

// 使用Map调用其entrySet()返回一个Set<Map.Entry>的集合,Map.Entry为Map的成员内部类，Map.Entry提供两个方法getKey(),getValue()

for (Iterator it = headers.entrySet().iterator(); it.hasNext();) {

Map.Entry entry = (Map.Entry) it.next();

// 循环配置响应头部信息

response.setHeader((String) entry.getKey(),

(String) entry.getValue());

}

// 执行下一步

chain.doFilter(request, response);

}

@Override

public void init(FilterConfig request) throws ServletException {

// 获取headers初始化属性值 对应

/*

* <init-param> <param-name>headers</param>

* <param-value>Content-Encoding=gzip</param-value> </init-param>

*/

String headerStr = request.getInitParameter("headers");

// 切割初始化参数headers的数据信息

String[] headers = headerStr.split(",");

// 解析web.xml中Filter配置标签中的初始化数据信息

/*

* 在这里提供了一个配置所有相应头部信息的扩展功能，例如可以在xm文件中配置多个参数信息

* <param-value>Content-Encoding=gzip,cache=nocache</param-value>

*/

for (int i = 0; i < headers.length; ++i) {

String[] temp = headerStr.split("=");

// 将配置信息通过=分割后以键值对的形式保存 例如：headers.put("Content-Encoding","gzip");

this.headers.put(temp[0].trim(), temp[1].trim());

}

}

}

Java代码


web.xml:

<filter>

<filter-name>gzFilter</filter-name>

<filter-class>org.viancent.filter.gzfilter.GzFilter</filter-class>

<init-param>

<param-name>headers</param-name>

<param-value>Content-Encoding=gzip</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>gzFilter</filter-name>

<url-pattern>*.gzjs</url-pattern>

</filter-mapping>

Java代码


Jsp:

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> //如果解压出来的js文件出现乱码，请将所有的格式进行统一，尤其是在编译js文件的时候

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

</head>

<script type="text/javascript"

src="<%=request.getContextPath()%>/userjs/ext-all-debug.gzjs" charset="GBK"></script>//保持编码格式

<span style="white-space: pre;"> </span> <body onload="showMessage()">

</body>

</html>

[b]大功告成[/b]
动态压缩
第一种使用tomcat的配置文件server.xml打开压缩功能即可,在Connector标签加入以下

useSendfile="false"

compression="on"

compressionMinSize="2048"

noCompressionUserAgents="gozilla, traviata"

compressableMimeType="text/html,application/xhtml+xml,application/xml,text/xml,text/javascript,text/css,text/plain,application/x-
javascript,application/javascript,text/xhtml,text/json,application/json,application/x-www-form-urlencoded,text/javaScript"

第二种使用nginx的配置文件nginx.conf打开压缩功能即可

[csharp] view
plaincopy

http {

include mime.types;

default_type application/octet-stream;

server_tokens off; ##禁止显示nginx软件的版本号

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

#access_log logs/access.log main;

sendfile on;

#tcp_nopush on;

#keepalive_timeout 0;

keepalive_timeout 65;

gzip on;

gzip_min_length 1000;

gzip_buffers 4 8k;

gzip_comp_level 9; #0-9 默认值为1，值越大压缩率越高，消耗的cpu资源越多，传输量减小。

gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

### nginx做非80端口转发

server {

listen 82;

server_name localhost;

location / {

proxy_pass http://127.0.0.1:7001;
proxy_set_header Host $host:82;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Via "nginx";

}

}

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航