JS文件的压缩

该文章我于2010年发表于新浪博客。

最近在学习Ext，遇到一个问题，就是Ext加载的很慢，Firefox中稍微好一点，IE加载的时候尤其的慢。听说JS可以压缩以提高传输速度，所以就上网找了一下，最后找了一个tk-filters的Jar包，解决了问题。

Ext框架做出来的界面很漂亮，漂亮的东西加载的时候也就会耗费时间。要使用Ext框架必须引入Ext的JS文件，其中ext-all.js文件642K，ext-all.css文件135K，这是两个必须的文件，另外ext-all-debug.js文件有2.56M。

去http://sourceforge.net/projects/filterlib/网站下载tk-filters文件，然后解压开来，将里边的tk-filters.jar文件复制到Web工程的WebRoot/WEB-INF/lib目录下。在web.xml文件中加上几个filter，代码如下所示：

	
	
		GZipFilter
		
			com.tacitknowledge.filters.gzipfilter.GZIPFilter
		
	

	
	
		CacheFilter
		
			com.tacitknowledge.filters.cache.CacheHeaderFilter
		
	

	
	
		ClusterFilter
		com.tacitknowledge.filters.clustercheck.ClusterCheckFilter
	

	
		GZipFilter
		*.js
	

	
		GZipFilter
		*.css
	

	
		CacheFilter
		*.js
	

	
		CacheFilter
		*.css
	

	
		ClusterFilter
		*.js
	

	
		ClusterFilter
		*.css
	

	
		CacheFilter
		*.gif
	

	
		CacheFilter
		*.jpg
	

	
		CacheFilter
		*.png
	

 

其中GZipFilter定义的是压缩过滤器，用于压缩JS及CSS文件，CacheFilter定义的是缓存过滤器，在第一次请求后会将mapping的js和css文件缓存在本地，这样第二次请求的时候就不用再下载这些文件，以减少传输的数据量，提高访问的速度。

接下来创建一个属性文件，文件名为：tk-filters.properties，将这个文件放在classes目录下，如果用IDE的话就直接在src目录中创建就行了，IDE会自动将src中的文件映射到classes目录中的。tk-filters.properties文件的内容如下：

#
# This properties file controls the behavior of the various
# filters available in the Tacit Knowledge filters package.
#
# Each filter has its own set of configuration directives,
# prefixed with the filter name, that controls that specific
# filter's behavior
#

#########################################################################
#                         ClusterCheck
#########################################################################
# A frequent problem when clustering is that applications use the session
# in a non-clusterable way, so The "ClusterCheckFilter" instruments the
# application server's sessions with checks to see if this is a problem.
ClusterCheckFilter.Enabled=true

# Its possible to check for modifications to session objects after
# they have been set in to the session. This is a problem for sessions
# that are replicated in a copy-on-write fashion
ClusterCheckFilter.UnsetModificationsCheck=false

# Its possible to check serialized size to ensure high performance clustering
ClusterCheckFilter.ByteSizeCheck=false

# Aggregate size is important for containers that serialize the whole session
# every time. An example would be a database-backed session store.
# An aggregate size limit will also cap the maximum RAM used by sessions,
# allowing you to quantify the RAM necessary for peak loads.
ClusterCheckFilter.AggregateByteSizeLimit=30720

# Attribute size is important because each time an attribute is put in a
# session, it has to be serialized and persisted to a cluster peer, or
# to a database (depending on clustering implementations). Thus, very large
# session attributes will be a performance problem.
ClusterCheckFilter.AttributeByteSizeLimit=20480

# ClusterCheck errors can return a 500 error to the client
# in order to have "fail-fast" behavior, if this is turned on.
# This is good for test machines, but is usually too aggressive for production.
ClusterCheckFilter.ClientError=true
#########################################################################

 

#########################################################################
#                          GZIPFilter
#########################################################################
# A performance boost can be achieved by sending data from the application
# server to the client using the Gzip encoding. This incurs a small CPU
# cost to gain a large network benefit. The GZIPFilter, when enabled,
# transparently Gzip encodes all data after it leaves the application,
# but before its transmitted to the client.

# WARNING: GZIPFilter is currently not recommended for production use.
#          It does not send all data under certain conditions.
GZIPFilter.Enabled=true

# Its possible for the GZIPFilter to log statistics about the compression
# ratios and byte savings it is achieving. This turns that on or off.
GZIPFilter.LogStats=false
#########################################################################

 

#########################################################################
#                          CacheFilter
#########################################################################
# A server can send expiration headers to the client, enabling the client
# to confidently cache certain pieces of static content. This eliminates
# unnecessary conditional GETs from the client to validate the freshness of
# content. If the application is on a server that doesn't do that, this
# filter can be enabled and mapped to static content (images, javascript,
# css files, etc), potentially reducing network traffic a great deal.
CacheFilter.Enabled=true

# This is the number of minutes the client will wait before verifying the
# freshness of a piece of content.
CacheFilter.ExpirationMinutes=15
#########################################################################

这个文件的主要功能是开启压缩和缓存功能。另外在tk-filters.zip文件的conf目录中也有这个文件，大家可以复制过来改动一下即可。

最后写一段简单的ExtJs代码来测试一下。建立一个demo.js文件，内容如下：

Ext.onReady(function(){
 Ext.onReady(function(){
  Ext.Msg.alert("问候", "hello, this is test page");
 });  
}); 

写一个jsp文件，引入ExtJs和demo.js文件，内容如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




















	This is my JSP page.
	

启动服务器，用Firefox打开jsp页面，在firebug的net窗口中，可以看见ext-all.css已经有原来的135K变成了21.5K，ext-all.js文件由原来的642K变成了175.9K。