The problems that exist:
There are 2 main problems with merging and compressing files:
1. Every time you publish, you need to run your own BAT file or other program to merge and compress the files in their own configuration.
2. Due to the production environment and the development environment needs to load the file, the production environment in order to need to load the merged, compressed files, and the development environment in order to modify, debugging convenience, need to load the non-merged, compressed files, so we often need in the JSP similar to the following Judgment code:
Copy Code code as follows:
<c:if test= "${env== ' prod '}" >
<script type= "Text/javascript" src= "/js/all.js" ></script>
</c:if>
<c:if test= "${env== ' Dev '}" >
<script type= "Text/javascript" src= "/js/1.js" ></script>
<script type= "Text/javascript" src= "/js/2.js" ></script>
<script type= "Text/javascript" src= "/js/3.js" ></script>
</c:if>
Cache problem: In the current era of JS flying, we all know the great benefits of caching, but the cache is a very troublesome problem, I believe many people have experienced the following situation: In order to make the program faster, on the server for JS plus buffer 5 days of code, but the product update the day after the phone said system error, Detailed understanding after the discovery is caused by the cache, let the user delete the cache will ok. The reason is very simple, you JS has been modified, but the user is still using the old JS cache. After several times in this situation, the leader was scolded several times. There is no way only to the JS buffer removed, or changed into 8 hours. But this is completely lost the advantages of caching, which we need to solve what problems in order to let us use the buffer satisfactory?
1. How to modify a certain JS, automatically put all references to the JS page in the Code Add 1 version number?
2. How to generate the version number, based on what to produce this version number.
Perhaps someone in order to solve the above caching problem, wrote a JSP tag, through the tag read JS, CSS file modification time as the version number, so as to solve the above 2 problems. But there are several drawbacks to this approach:
1. Every request to read the file through the tag to read the modification time, slow. Of course you can put the file modification time in the cache, which will also add to the memory usage.
2. Not used in HTML static pages
3. If your company is the following deployment release method (This is the case for our company), it will fail. Each release, not directly overwriting the previous web directory, operational dimension for the release of convenience, requiring each release directly to their 1 war packages, they will be the entire web directory deleted before, and then upload the current war package, which causes the program to run, all files after the last modification time is the time to extract the war.
Share your project's treatment options:
To address the issues discussed above, the following 1 components are written below, in which the file size is used as the version number of the file according to our own actual situation, although in the file modification is very small (for example, change the character A to B), the file size may not change, resulting in the version number will not change.
But the odds are still very low. Of course, if you feel the use of file modification time as the version number for you, only need to modify a line of code, the following look at the processing process of this component (originally wanted to use the flowchart to express, and finally feel the text to write the straightforward):
1. Program Startup (contextinitialized)
2. Search the directory of all merge.txt files, according to merge.txt file configuration merged files, merge.txt file instance is as follows:
# file Merge configuration file, multiple files to | separate, with/at the beginning of the representation from the root directory,
# The filename after the space name indicates the file name after the merge
# Merge The 1,2,3 into the all file
1.js|2.js|3.js All.js
#合并CSS
/css/mian.css|/css/common.css All.css
3. Search the program directory for all JS,CSS files (including merged), each file is compressed to generate the corresponding 1 new files.
4. Search the program directory all jsp,html files, the reference code for all js,css to compress and add the version number of the reference.
Instance:
The file structure of the instance is shown below:
Look at the JSP raw code (before the program runs):
Copy Code code as follows:
<% @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; Whether to develop environment%>
<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"/>
<%}%>
<body>
<H1 class= "C1" >hello world!</body>
Code for the JSP after the program runs:
Copy Code code as follows:
<% @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; Whether to develop the environment
%>
<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"/>
<%}%>
<body>
<H1 class= "C1" >hello world!</body>
Files with a 3gmin suffix are all generated automatically when the program starts.
Instance download: Swipe here to download
PS: The design of their own solution does not solve the "need to add a code to judge the JSP problem", mainly because there is no good way to automatically delete the 1.js,2.js,3.js 3 references, Instead of inserting 1 new all.js quotes, if the student has a good idea of how to solve the problem, please do not hesitate to enlighten me.
If you have students want to use this component, it is recommended to run the test environment once, the modified program directly uploaded to the official server, and then remove this function, otherwise on the server every start call this function or need to spend some time and resources
In fact, always want to use the version of SVN to control the cache, this is the most rigorous method, but also because it is too complex to do, so has not been done, and later have time to study.
