ext-all.js這個(gè)文件都有500多k,在頁(yè)面中直接引用這個(gè)js文件是很不現(xiàn)實(shí)的,曾經(jīng)在一個(gè)大的項(xiàng)目中使用這個(gè)js,則直接導(dǎo)致頁(yè)面半天出不來的后果。于是自己研究了下,目前通過下面的方法來優(yōu)化提升Ext Js的性能。
使用JSVM
JSVM (JavaScript Virtual Machine的縮寫),一個(gè)JavaScript基礎(chǔ)框架,sourceforge開源項(xiàng)目,由萬(wàn)常華(wch3116)于2003年底發(fā)起, 目前最新版本是2.05,采用的是 BSD License 授權(quán)協(xié)議。本身JSVM也提供了JSVM+Ext2的實(shí)例,看看就知道怎么在JSVM下加入ext的js庫(kù)了。
我在項(xiàng)目中是這么用的:
<script type= "text/javascript" src= "/depporject/comjs/jsvm2/jsre.js" classpath= "dom2.gzjs;ext2p.gzjs" modules= "smartloader" ></script>
為什么擴(kuò)展名是gzjs呢,這是使用了gzip壓縮js文件
使用Gzip壓縮
gzip壓縮后,ext js文件的大小將只有100k左右。
只是對(duì)gzip壓縮的文件需要提供filter(Java開發(fā)),為你的應(yīng)用提高解壓縮功能,filter的寫法很簡(jiǎn)單:
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());
}
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 > 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 >
通過以上兩步,整個(gè)頁(yè)面裝載速度很快了。大家可以試試。
另外在實(shí)際開發(fā)中,并不是將ext-all.js全部在jsvm中裝載,只是將常用的ext js代碼歸到一起,由gzip壓縮,然后又jsvm裝載(即ext2p.js,p代表部分),剩下的ext js代碼由jsvm按需裝載。