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，代码如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	<!-- GZIPFilter Definition -->
	<filter>
		<filter-name>GZipFilter</filter-name>
		<filter-class>
			com.tacitknowledge.filters.gzipfilter.GZIPFilter
		</filter-class>
	</filter>

	<!-- CacheFilter Definition -->
	<filter>
		<filter-name>CacheFilter</filter-name>
		<filter-class>
			com.tacitknowledge.filters.cache.CacheHeaderFilter
		</filter-class>
	</filter>

	<!-- ClusterCheckFilter Definition -->
	<filter>
		<filter-name>ClusterFilter</filter-name>
		<filter-class>com.tacitknowledge.filters.clustercheck.ClusterCheckFilter</filter-class>
	</filter>

	<filter-mapping>
		<filter-name>GZipFilter</filter-name>
		<url-pattern>*.js</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>GZipFilter</filter-name>
		<url-pattern>*.css</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>CacheFilter</filter-name>
		<url-pattern>*.js</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>CacheFilter</filter-name>
		<url-pattern>*.css</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>ClusterFilter</filter-name>
		<url-pattern>*.js</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>ClusterFilter</filter-name>
		<url-pattern>*.css</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>CacheFilter</filter-name>
		<url-pattern>*.gif</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>CacheFilter</filter-name>
		<url-pattern>*.jpg</url-pattern>
	</filter-mapping>

	<filter-mapping>
		<filter-name>CacheFilter</filter-name>
		<url-pattern>*.png</url-pattern>
	</filter-mapping>

</web-app> 

其中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"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" href="script/ext3/resources/css/ext-all.css"
	type="text/css"></link>
<script type="text/javascript" src="script/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="script/ext3/ext-all.js"></script>
<script type="text/javascript" src="script/demo/demo.js"></script>
</head>

<body>
	This is my JSP page.
	<br>
</body>
</html>

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