使用gzip压缩extjs文件

最新推荐文章于 2023-05-11 12:10:17 发布

最新推荐文章于 2023-05-11 12:10:17 发布 · 223 阅读

文章标签：

#extjs #gzip #压缩 #体积

extjs4 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用gzip压缩技术减少extjs4依赖文件大小，从而提高外网项目的加载速度，包括具体操作步骤和配置web.xml的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

突然奇想想用extjs4做一个外网项目，但是extjs4依赖的文件实在太大，光ext-all.js已经压缩后的都有1.2m，做外网的话速度非常的慢，为了提高速度可以用gzip对文件再进行压缩，最后可以让1.2m的文件压缩成300多k，这样就大大的节省的时间。

1：先使用gzip压缩文件(http://download.youkuaiyun.com/detail/chen2991101/5654201)

把gzip.ext放在一个目录下面，需要压缩的文件也要放在同目录下面，然后在cmd窗口中也要到同样的目录下面输入：“gzip 文件名” 即可，然后把后缀名修改成.gzjs

2:因为压缩过后需要浏览器来来解压，所以需要一个过滤器来添加一个头信息告诉浏览器需要解压

public class GzipFilter 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 = 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());  
  
        }  
  
    }  
}

配置了过滤器后需要在web.xml中配置过滤器

<filter>         
    <filter-name>GzipJsFilter</filter-name>         
    <filter-class>org.mango.crm.filter.GzipFilter</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>

最后在html文件中引用压缩后的文件

<script type="text/javascript" src="/resource/extjs/ext-all.js.gzjs"></script>

这样就完成了