当前位置：首页 > 资讯 > 技术文档

高性能WEB开发 JS、CSS的合并、压缩、缓存管理

时间：2022-11-23 23:53 编辑：来源：阅读：
扫一扫，手机访问

摘要：高性能WEB开发 JS、CSS的合并、压缩、缓存管理

存在的问题：合并、压缩文件主要有2方面的问题： 1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。 2. 因生产环境和开发环境需要加载的文件不一样，生产环境为了需要加载合并、压缩后的文件，而开发环境为了修改、调试方便，需要加载非合并、压缩的文件，所以我们常常需要在JSP中类似与下面的判断代码：

[url=<%=request.getContextPath() %>/css/1.css]<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2.css" /> <% }else{ %> <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/all.js"></script> <link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all.css" /> <% } %> </head> <body> <h1 class="c1">Hello World!</h1> </body> </html>

程序运行后JSP的代码：

[u]复制代码[/u][/url] 代码如下:

<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% boolean isDev = false; // 是否开发环境 %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <% if(isDev){ %> <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/1-3gmin.js?90"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/2-3gmin.js?91"></script> <link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1-3gmin.css?35" /> <link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2-3gmin.css?18" /> <% }else{ %> <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/all-3gmin.js?180"></script> <link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all-3gmin.css?53" /> <% } %> </head> <body> <h1 class="c1">Hello World!</h1> </body> </html>

加3gmin后缀的文件全部是程序启动时自动生成的。实例下载：[url=http://xiazai.jb51.net/201005/yuanma/JsCssDemo.rar]猛击此处下载 [/url] PS：自己的设计的处理方案并没有解决"需要JSP中加判断代码的问题"，主要是因为还没有找到什么好的办法去自动删除1.js,2.js,3.js的3个引用，而插入1个新的all.js的引用，如果那位同学对解决这个问题有好的想法，请不吝赐教。如果有同学想使用这个组件，建议在测试环境下运行一次后，把修改后的程序直接上传到正式服务器上，然后去掉这个功能，不然在服务器上每次启动都调用这个功能还是需要花费一些时间和资源的其实一直想使用SVN中的版本号来控制缓存，这个是最严谨的一个方法，但也因为做起来太复杂，所以一直也没做起来，以后以后有时间可以再研究。

全部评论(0)

上一篇：javascript判断chrome浏览器的方法
下一篇：编写高性能的JavaScript 脚本的加载与执行

资讯排行榜
更多>>