技术开发 频道

WEB高性能开发之JS与CSS的合并压缩

        实例:

  实例的文件结构如下图:

  看JSP原始代码(程序运行前):

<%@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.js"></script>
        
<script type="text/javascript" src="<%=request.getContextPath() %>/js/1.js"></script>
        
<script type="text/javascript" src="<%=request.getContextPath() %>/js/2.js"></script>
        
<link type="text/css" rel="stylesheet" href="<%=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的代码:

<%@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后缀的文件全部是程序启动时自动生成的。

        实例下载:猛击此处下载

0
相关文章