JS与CSS的合并压缩如何实现
导读：本文共3595字符，通常情况下阅读需要12分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 存在的问题：合并、压缩文件主要有2方面的问题：1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。2. 因生产环境和开发环境需要加载的文件不一样，生产环境为了需要加载合并、压缩后的文件，而开发环境为了修改、调试方便，需要加载非合并、压缩的文件，所以我们常常需要在JSP中类似与下面的判断代码：<c:iftest=&q... ...
目录
(为您整理了一些要点),点击可以直达。存在的问题：
合并、压缩文件主要有2方面的问题：
1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。
2. 因生产环境和开发环境需要加载的文件不一样，生产环境为了需要加载合并、压缩后的文件，而开发环境为了修改、调试方便，需要加载非合并、压缩的文件，所以我们常常需要在JSP中类似与下面的判断代码：
<c:iftest="${env=='prod'}"><scripttype="text/javascript"src="/js/all.js"></script></c:if><c:iftest="${env=='dev'}"><scripttype="text/javascript"src="/js/1.js"></script><scripttype="text/javascript"src="/js/2.js"></script><scripttype="text/javascript"src="/js/3.js"></script></c:if>缓存问题：
1. 如何在修改了某个JS后，自动把所有引用该JS页面的代码中加上1个版本号?
2. 该如何生成版本号，根据什么来产生这个版本号。
可能有人为了解决上面的缓存问题，写了个JSP标签，通过标签读取JS、css文件的修改时间来作为版本号，从而来解决上面2个问题。但这种方法有下面几个缺点：
1. 每次请求都要通过标签读取读取文件的修改时间，速度慢。当然你可以把文件的修改时间放到缓存中，这样也会加到了内存使用量。
2. 在HTML静态页面中用不了
3. 如果你们公司是如下的部署发布方式(我们公司就是这样)，则会失效。每次发布，不是直接覆盖之前的WEB目录，运维的为的发布方便，要求每次发布直接给他们1个war包，他们会把之前WEB目录整个删除，然后上传现在的war包，这样就导致程序运行后，所有文件的***修改时间都是解压war的时间。
分享自己项目中的处理方案：
为了解决上面讨论过的问题，在下写了1个如下的组件，组件中根据我们自己的实际情况使用了文件大小来做为文件的版本号，虽然在文件修改很小(比如把字符a改成b)，可能文件大小并没有变，导致版本号也不会变。
但这种机率还是非常低的。当然如果你觉的使用文件修改时间作为版本号适合你，只需要修改一行代码就行，下面看下这个组件的处理流程：
1. 程序启动(contextInitialized)
2. 搜索程序目录下的所有merge.txt文件，根据merge.txt文件的配置合并文件, merge.txt文件实例如下：
# 文件合并配置文件,多个文件以|隔开，以/开头的表示从根目录开始,
# 空格之后的文件名表示合并之后的文件名
# 把1,2,3合并到all文件中
1.js|2.js|3.js all.js
#合并CSS
/css/mian.css|/css/common.css all.css
3. 搜索程序目录下所有JS，CSS文件(包括合并后的)，每个文件都压缩后生成对应的1个新文件。
4. 搜索程序目录下所有JSP,html文件，把所有JS,css的引用代码改成压缩后并加了版本号的引用。
实例：
实例的文件结构如下图：
看JSP原始代码(程序运行前)：
<%@pagecontentType="text/html"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><%booleanisDev=false;//是否开发环境%><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>JSPPage</title><%if(isDev){%><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/jquery-1.4.2.js"></script><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/1.js"></script><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/2.js"></script><linktype="text/css"rel="stylesheet"href="<%=request.getContextPath()%>/css/1.css"/><linktype="text/css"rel="stylesheet"href="<%=request.getContextPath()%>/css/2.css"/><%}else{%><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/jquery-1.4.2.js"></script><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/all.js"></script><linktype="text/css"rel="stylesheet"href="<%=request.getContextPath()%>/css/all.css"/><%}%></head><body><h2class="c1">HelloWorld!</h2></body></html>程序运行后JSP的代码：
<%@pagecontentType="text/html"pageEncoding="UTF-8"%><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><%booleanisDev=false;//是否开发环境%><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>JSPPage</title><%if(isDev){%><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/jquery-1.4.2-3gmin.js?99375"></script><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/1-3gmin.js?90"></script><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/2-3gmin.js?91"></script><linktype="text/css"rel="stylesheet"href="<%=request.getContextPath()%>/css/1-3gmin.css?35"/><linktype="text/css"rel="stylesheet"href="<%=request.getContextPath()%>/css/2-3gmin.css?18"/><%}else{%><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/jquery-1.4.2-3gmin.js?99375"></script><scripttype="text/javascript"src="<%=request.getContextPath()%>/js/all-3gmin.js?180"></script><linktype="text/css"rel="stylesheet"href="<%=request.getContextPath()%>/css/all-3gmin.css?53"/><%}%></head><body><h2class="c1">HelloWorld!</h2></body></html>加3gmin后缀的文件全部是程序启动时自动生成的。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">JS与CSS的合并压缩如何实现的详细内容，希望对您有所帮助，信息来源于网络。