GZip压缩和按需装载提升Ext Js的性能

最新推荐文章于 2025-07-13 07:09:02 发布

iteye_19137

最新推荐文章于 2025-07-13 07:09:02 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： EXT JavaScript .net Blog 框架 ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_19137/article/details/81766972

本文介绍了一种通过使用JSVM框架结合GZIP压缩技术来优化ExtJS库加载速度的方法，大幅减少了ext-all.js文件体积，从而提升了页面加载性能。

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

ext-all.js这个文件都有500多k，在页面中直接引用这个js文件是很不现实的，曾经在一个大的项目中使用这个js，则直接导致页面半天出不来的后果。于是自己研究了下，目前通过下面的方法来优化提升Ext Js的性能（转载请注明出处http://blog.youkuaiyun.com/selley）：
使用JSVM、
JSVM (JavaScript Virtual Machine的缩写)，一个JavaScript基础框架，sourceforge开源项目，由万常华（wch3116）于2003年底发起, 目前最新版本是2.05,采用的是 BSD License 授权协议。本身JSVM也提供了JSVM+Ext2的实例，看看就知道怎么在JSVM下加入ext的js库了。

（不知道为什么jsvm官网上不去了）

我在项目中是这么用的：

<script type="text/javascript" src="/depporject/comjs/jsvm2/jsre.js" classpath="dom2.gzjs;ext2p.gzjs" modules="smartloader" ></script>
为什么扩展名是gzjs呢，这是使用了gzip压缩js文件(转载请注明出处http://blog.youkuaiyun.com/selley)；

使用Gzip压缩
gzip压缩后，ext js文件的大小将只有100k左右。(转载请注明出处http://blog.youkuaiyun.com/selley)

只是对gzip压缩的文件需要提供filter（Java开发），为你的应用提高解压缩功能,filter的写法很简单：

............
public void doFilter(HttpServletRequest request,
HttpServletResponse response, FilterChain chain)
throws IOException, ServletException {
for(Iterator it = headers.entrySet().iterator();it.hasNext();) {
Map.Entry entry = (Map.Entry)it.next();
response.addHeader((String)entry.getKey(),(String)entry.getValue());
//转载请注明出处http://blog.youkuaiyun.com/selley
}
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配置(转载请注明出处http://blog.youkuaiyun.com/selley)：
<filter>
<filter-name>addHeaderFilter</filter-name>
<filter-class>org.common.AddHeaderFilter</filter-class>
<init-param>
<param-name>headers</param-name>
<param-value>Content-Encoding=gzip</param-value>
</init-param>
</filter>

通过以上两步，整个页面装载速度很快了。大家可以试试。

另外在实际开发中，并不是将ext-all.js全部在jsvm中装载，只是将常用的ext js代码归到一起，由gzip压缩，然后又jsvm装载（即ext2p.js，p代表部分），剩下的ext js代码由jsvm按需装载。