去年的时候公司做一个项目,里面需要用到大量的js效果。许多页面都需要加载大量的js文件,造成页面加载缓慢。为解决这个问题做了这个jsp标签。该标签解决了下面三个问题:
1、将多个js文件合并成一个js文件,减少请求服务器的次数。
2、压缩js文件大小,加快下载时间。
3、添加js文件版本号,在修改js文件后不再需要客户强制刷新浏览器就能取到最新版本的js文件。
使用方法:
1、将jsMergeCompress.jar和依赖包放置到lib下
2、jsp页面做如下写法即可:
<%@ taglib prefix="s" uri="/tmg/smc" %>
<%--
Created by IntelliJ IDEA.
User: garmbrood
Date: 2010-5-5
Time: 23:37:39
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=GBK" language="java" %>
<html>
<head>
<title>js合并压缩测试</title>
<s:scriptCompress to="/js_compress/test.js">
<script type="text/javascript" src="/js/test1.js"></script>
<script type="text/javascript" src="/js/test2.js"></script>
</s:scriptCompress>
</head>
<body>
</body>
</html>
scriptCompress标记中的所有js文件被合并成to属性指向的“/js_compress/test.js”文件。
合并后的html代码如下:
<html>
<head>
<title>js合并压缩测试</title>
<script type="text/javascript" src="/js_compress/test.js?version=180"></script>
</head>
<body>
</body>
</html>
我们看到合并后的js文件后有一个version=180的版本标志,每当修改标签中的任意一个js文件的时候,该版本号就会改变,版本号改变后浏览器将会当成一个新的js文件进行下载,而不是用缓存中的旧文件。这样就达到无需刷新浏览器即可加载最新的js文件的目的,如果js文件无变化则版本号保持不变,浏览器会直接从缓存中读取js文件。
合并前和合并后的js文件分别如下:
test1.js:
/**
* 这些是注释,供测试使用
*/
function func1(){
alert("func1222");
}
test2.js:
/**
* 这些是注释,供测试使用
*/
function func2(){
alert("func2");
alert("2222")
}
test.js:
function func1(){alert("func1222");}function func2(){alert("func2");alert("2222");}
另外,该tag还有一个可选属性onlyMerge=true|false,因为该tag中使用的是yui的yuicompressor进行压缩的,主要是进行了源码级压缩,去掉注释和多余的空格等部分。当web服务器启动了gzip压缩时源码级压缩比可以忽略,这时可以选择只合并不压缩。