High-performance WEB development JS and CSS merging, compression, and Cache Management

Problems:

Merge and compress files:
1. During each release, you need to run your own bat file or other programs to merge and compress the file according to your configuration.
2. because the production environment and the development environment need to load different files, the production environment needs to load merged and compressed files, and the development environment for modification and debugging convenience, to load non-merged and compressed files, we often need the following judgment code in JSP:Copy codeThe Code is 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 problems: in the era of JS, we all know the huge benefits of caching, but the cache is indeed a very troublesome problem. I believe many people have experienced the following situations: to make the program faster, add the code buffered for JS for five days on the server. However, the next day after the product was updated, I received a call saying that the system went wrong. After learning more about it, I found that it was caused by caching, after the user deletes the cache, it will be OK. The reason is simple, that is, your JS has been modified, but the user is still using the old JS in the cache. After several such cases, the number of leaders fell several times. You can't just remove the JS buffer, or change it to 8 hours. In this way, the advantage of caching is completely lost. Which of the following problems need to be solved to make it easier for us to use caching?
1. After modifying a JS, how does one automatically add a version number to the code that references the JS page?

2. How to generate the version number and based on the version number.

Someone may have written a JSP tag to solve the above cache problem, and read the modification time of JS and css files as the version number through the tag, so as to solve the above two problems. However, this method has the following Disadvantages:
1. Each request reads the modification time of the file through the tag, which is slow. Of course, you can put the file modification time in the cache, which will also be added to the memory usage.

2. HTML static pages cannot be used

3. If your company uses the following deployment and release method (as we do), it will become invalid. Each release does not directly overwrite the previous WEB directory. O & M is convenient for release. Each release requires that a war package be directly sent to them, and they will delete the entire WEB directory, then upload the current war package. As a result, after the program runs, the last modification time of all files is the time when the war is decompressed.

Share the solution in your project:

To solve the problem discussed above, I wrote the following component below. The component uses the file size as the file version number based on our actual situation, although the file size is small (for example, changing the character a to B), the file size may not change, and the version number will not change.

However, this probability is very low. Of course, if you think that the file modification time is suitable for you as the version number, you only need to modify a line of code. Next, let's take a look at the processing process of this component (originally intended to be expressed using a flowchart, finally, I think the text is straightforward ):
1. contextInitialized)

2. All merge.txt files under the search program directory, and the configuration merge file of the merge.txt file. The example of the merge.txt file is as follows:
# Merge configuration files. Multiple files are separated by commas (,). The names starting with "/" Start with the root directory,
# The file name after space indicates the merged file name

# Merge 1, 2, 3 into the all file
1. js | 2. js | 3.js all. js

# Merging CSS
/Css/mian.css |/css/common.css all.css
3. Search for all JS and CSS files (including merged files) in the program directory, compress each file, and generate a new file.

4. Search all JSP and html files in the program directory, change the reference code of all JS and css files to compressed ones, and add the version number reference.

Instance:
The file structure of the instance is as follows:

View the original JSP code (before running the program ):Copy codeThe Code is 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 %>
<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 code after the program runs:Copy codeThe Code is 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
%>
<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-‑min.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-20.min.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>

All files with the extension min are automatically generated when the program starts.

Download instance: Click here to download

PS: the self-designed solution does not solve the problem of adding and determining code in JSP. This is mainly because there is no good way to automatically delete 1.js, 2.js, 3. insert a new all. js references. If the student has a good idea of solving this problem, please do not give me any further advice.
If you want to use this component, we recommend that you directly upload the modified program to the official server after running it once in the test environment, and then remove this function, otherwise, it will take some time and resources to call this function every time the server is started.
In fact, I have always wanted to use the version number in SVN to control the cache. This is the most rigorous method, but it is too complicated to do so, so I have never done it. I will be able to study it later.