Use Yui compressor to compress CSS/JS

The JS/CSS file is large. When users visit the site, they need to download JS/CSS for a long time and it will feel slow. Some may even cause messy initial page opening due to CSS files.

How can we increase the speed for users to download JS/CSS?

1. We cannot change the network conditions of users. Only our websites use faster bandwidth or use stronger servers, making users feel fast when accessing us.

2. Compress JS/CSS files. Because the files are small, the download time is very short.

Solution 1 requires a lot of money. solution 2 is relatively simple and has obvious effects.

The following describes how to use Yui compressor for JS/CSS compression.

1. Download yuicompressor http://www.julienlecomte.net/yuicompressor/

2. Use ant compilation to get the yuicompressor-x.y.z.jar package and enter the yuicompressor-x.y.z directory to run ant-F build. xml

3, in the build directory to get the yuicompressor-x.y.z.jar package, using Java-jar yuicompressor-2.4.2.jar in. js-O out. js

Check out the source file of out. js and you will find that the comment spaces and other information are removed.

For more help with Yui compressor, see http://www.julienlecomte.net/yuicompressor/README

 

Javascript needs to be packaged and compressed in the project. I chose yuicompressor.

Yuicompressor can compress JS and CSS files to Remove useless spaces, line breaks, and comments in the files. Greatly reduce the size of JS and CSS files.

A simple command is as follows:

Java Code

1. Java-jar yuicompressor-2.4.2. Jar -- Type JS -- charset UTF-8-O uiiang. js table. js

 

 
Java-jar yuicompressor-2.4.2.jar -- Type JS -- charset UTF-8-O uiiang. js table. js
 

-- Type specifies the file type to be packaged. js and CSS are optional.
-- Charset
-O specifies the output file name. If this parameter is not specified, the compressed content will be output to the command line.
The final table. JS is the source file to be packaged.

However, this compression has one drawback: only one file can be compressed, so bat is used for batch compression.

Create a compresjs. BAT file with the following content:

Java code

1. (DIR %1/AA/B/S | findstr/E/C:"JS")> Tmp.txt
2. For/F % I in (tmp.txt)DoJava-jar yuicompressor-2.4.2. Jar -- Type JS -- charset UTF-8-O % I. tmp % I & copy % I". Tmp"% I & del % I". Tmp"

 

(DIR % 1/AA/B/S | findstr/E/C: "JS")> tmp.txt for/F % I in (tmp.txt) do Java-jar yuicompressor-2.4.2.jar -- Type JS -- charset UTF-8-o % I. TMP % I & copy % I ". TMP "% I & del % I ". TMP"
 

Running this bat file will automatically search for. js files in all subfolders in the directory where the file is located, compress the files, and overwrite the source files.

Compresjs. bat only compresses files. If there are 10 source files, it will be compressed into 10 files without packaging. We can further process it, package the 10 source files into one file, just like the ext-all.js.

Create a packagejs. BAT file with the following content:

Java code

1. For/R .. \ webcontent \ js % I in (*. JS)DoType % I> uiiang-debug.js
2. Java-jar yuicompressor-2.4.2. Jar -- Type JS -- charset UTF-8-O uiiang. js uiiang-debug.js

 

 
For/r .. \ webcontent \ js % I in (*. do type % I> uiiang-debug.jsjava-jar yuicompressor-2.4.2.jar -- Type JS -- charset UTF-8-O uiiang. javascript uiiang-debug.js
 

In packagejs. BAT .. the contents of all JS files under \ webcontent \ JS are merged into the uiiang-debug.js file, and then compressed to uiiang on the uiiang-debug.jsp using yuicompressor. in this way, you can get a compressed file that contains all of the files. JS file code.

Packagejs. one disadvantage of the method used in bat is that it merges JS files in the order of folders, subfolders, and JS files, that is, sort by file name order. However, in our actual project, generally, the reference of JS files is to specify a specific loading sequence, otherwise an error will be reported. Therefore, we need to further modify packagejs. bat.

First, we need to create a deployment file, dir.txt.

Java code

1. .. \ Webcontent \ JS \ widgets \ widgetinit. js
2. .. \ Webcontent \ JS \ utils \ cache. js
3. .. \ Webcontent \ JS \ common \ globalconstant. js
4. .. \ Webcontent \ JS \ common \ globalvariable. js
5. .. \ Webcontent \ JS \ common \ globalfunc. js
6. .. \ Webcontent \ JS \ core \ Initialize. js

 

.. \ Webcontent \ JS \ widgets \ widgetinit. JS .. \ webcontent \ JS \ utils \ cache. JS .. \ webcontent \ JS \ common \ globalconstant. JS .. \ webcontent \ JS \ common \ globalvariable. JS .. \ webcontent \ JS \ common \ globalfunc. JS .. \ webcontent \ JS \ core \ Initialize. JS
 

In this file, write the file path according to the JS file loading sequence specified in JSP
Modify packagejs. bat.

Java code

1. For/F % I in (dir.txt)DoType % I> uiiang-debug.js
2. Java-jar yuicompressor-2.4.2. Jar -- Type JS -- charset UTF-8-O uiiang. js uiiang-debug.js

 

For/F % I in (dir.txt) do type % I> uiiang-debug.jsjava-jar yuicompressor-2.4.2.jar -- Type JS -- charset UTF-8-O uiiang. js uiiang-debug.js
 

After this packagejs.batfile is executed, the batch command will automatically read dir.txt and retrieve the path of the. js file line by line in the order you specify, merge the file content into the uiiang-debug.js.

In dir.txt, the external handler must list all the JS file paths to be packaged and compressed, because the new pakagejs. bat will no longer automatically search for all JS files. If there is any omission, an error will be reported.

In this case, the work of compressing and packing JS files is complete, and you can also convert the. js file in the Code into. CSS file to package the CSS file. Of course, the type of yuicompressor should also be changed to CSS.