javascript合并压缩的jsp tag实现

  去年的时候公司做一个项目,里面需要用到大量的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压缩时源码级压缩比可以忽略,这时可以选择只合并不压缩。

你可能感兴趣的:(JavaScript,java,jsp,浏览器,yui)