ExtJS使用gzip压缩

首先检查问题所在，调研发现客户的习惯是把浏览器cache过期时间设置为12个小时。
每天在上登陆的时候都需要重新再把全部的css,js,html,jpg。。。文件全部加载一遍。
而我们系统使用的gwt ext编写的前端页面，完全符合ajax的风格。
在用户登录之后，再也不做整体的页面刷新。也就是说，全部的js，html，css文件全部
被编译在了index.html之中。检查发现index.html有5M+，好吧，就是你的问题。。。

 

关于加快页面访问速度的实现，总体而言有两个努力的方向。
1：使用缓存。
2：压缩传输。

 

关于基于资源的Http Cache实现，参见robbin的相关文章，这里就跳过了。
http://robbin.iteye.com/blog/462476

 

主要讲下压缩传输文件的实现。
压缩文件的途径有两种：1 手动压缩JS，编写自己的过滤器（Filter），配置自己过滤器。2 使用工具包。

1 我只相信自己写的代码
  【1】将js文件手动压缩。如项目中的ext-all.js 和 ext-core.js.使用gzip压缩，压缩之后将
  文件后缀改为.gzjs.(压缩比例大致为70%)。
  【2】编写Filter。

Java代码  

1. public class GzipJsFilter implements Filter   
2. {   
3. Map headers = new HashMap();   
4.   
5. public void destroy() { }   
6.   
7. public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)throws IOException, ServletException {   
8.     if (req instanceof HttpServletRequest)   
9.       doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);   
10.     else  
11.       chain.doFilter(req, res);   
12. }   
13.   
14. public void doFilter(HttpServletRequest request, HttpServletResponse response,FilterChain chain)   
15.     throws IOException, ServletException   
16. {   
17.     request.setCharacterEncoding("UTF-8");   
18.     for (Iterator it = this.headers.entrySet().iterator(); it.hasNext(); ) {   
19.       Map.Entry entry = (Map.Entry)it.next();   
20.       response.addHeader((String)entry.getKey(), (String)entry.getValue());   
21.     }   
22.     chain.doFilter(request, response);   
23. }   
24.   
25. public void init(FilterConfig config) throws ServletException {   
26.     String headersStr = config.getInitParameter("headers");   
27.     String[] headers = headersStr.split(",");   
28.     for (int i = 0; i < headers.length; ++i) {   
29.       String[] temp = headers[i].split("=");   
30.       this.headers.put(temp[0].trim(), temp[1].trim());   
31.     }   
32. }   
33. }  

[java] view plaincopy

1. 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());    }}}  

  领会精神，主题思想就是加文件头和取文件头。

  【3】配置web.xml

Xml代码  

1. <filter>    
2.       <filter-name>GzipJsFilterfilter-name>    
3.       <filter-class>com.monica.bussiness.GzipJsFilterfilter-class>    
4.       <init-param>    
5.           <param-name>headersparam-name>    
6.           <param-value>Content-Encoding=gzipparam-value>    
7.       init-param>  
8. filter>  
9. <filter-mapping>  
10.    <filter-name>GzipJsFilterfilter-name>  
11.    <url-pattern>*.gzjsurl-pattern>  
12. filter-mapping>  

[xml] view plaincopy

1. GzipJsFilter       com.monica.bussiness.GzipJsFilter                  headers           Content-Encoding=gzip          GzipJsFilter   *.gzjs  

  加入过滤器配置。指定我们需要解压的文件类型。

2 我不想写自己的轮子
  【1】下载tk-filter工具包。下载地址 http://sourceforge.net/projects/filterlib
  【2】将解压后得到的jar包引入工程。将tk-filters.properties加入工程WEB-INF/class目录下
       修改tk-filters.properties GZIPFilter.Enabled=true
      （其他还有几个打印压缩比例之类的控制，自己改变参数选择就可以了）
  【3】配置web.xml

Xml代码  

1. <filter>  
2.     <filter-name>GZIPFilterfilter-name>  
3.     <filter-class>com.tacitknowledge.filters.gzipfilter.GZIPFilterfilter-class>  
4. filter>  
5.   
6.   <filter-mapping>  
7.     <filter-name>GZIPFilterfilter-name>  
8.     <url-pattern>*.jsurl-pattern>  
9.   filter-mapping>  
10.   
11.   <filter-mapping>  
12.     <filter-name>GZIPFilterfilter-name>  
13.     <url-pattern>*.cssurl-pattern>  
14.   filter-mapping>  
15.   
16.   <filter-mapping>  
17.     <filter-name>GZIPFilterfilter-name>  
18.     <url-pattern>*.htmlurl-pattern>  
19.   filter-mapping>  
20.   
21.   <filter-mapping>  
22.     <filter-name>GZIPFilterfilter-name>  
23.     <url-pattern>*.gifurl-pattern>  
24.   filter-mapping>  

[xml] view plaincopy

1. GZIPFilter    com.tacitknowledge.filters.gzipfilter.GZIPFilter      GZIPFilter    *.js        GZIPFilter    *.css        GZIPFilter    *.html        GZIPFilter    *.gif    

 

我们来看下压缩之后网络传输的大小

 

Elapsed Time   2.915 seconds
Network Round Trips  2 
Downloaded Data   1258448 bytes
Uploaded Data   989 bytes
HTTP Compression Savings 4585156 bytes
DNS Lookups   0 
TCP Connects   0

（使用工具为HttpWatcher 下载地址 http://www.httpwatch.com/download/）

压缩之后index页面大小为 1.1M，ext-all.js大小为138k。 压缩比例在80%左右。

 

推荐使用tk-filter，因为不仅不需要你新加入代码（预示着你需要重新测试），而且可以简便的配置
各个类型的文件，如html等。当然，手动压缩html也可以，但是这样你就需要每次在发布新版本的时候
都需要把新编译的html文件重新压缩一遍。在自动构建的过程中，这简直就是个灾难。