Use Yui compressor to compress JS and CSS, batch processing, right-click, registry, and Package

Source: Internet
Author: User
Tags website performance

For a large number of Ajax applications that use JavaScript and CSS, if Javascript and CSS are of large size, it may take a long time to transmit them to the client, resulting in poor website performance. It is natural to compress JavaScript and CSS.(WhereYui compressor has a compression rate of about 50%.)

Yui Compressor-The Yahoo! JavaScript and CSS Compressor

Yui Compressor:

    1. Remove comment
    2. Remove extra spaces
    3. Minor Optimization
    4. Identifier replacement)

Download: http://yuilibrary.com/downloads/#yuicompressor
The Yui compressor requires Java version> = 1.4. (The machine requires an environment above Java 1.4)Therefore, you must first download JDK and configure the environment.

--------------------------------------------- Gorgeous split line ---------------------------------------

1. perform the following steps to configure JDK environment variables in the Java environment: 1. My computer --> properties --> advanced --> environment variables. 2. Configure user variables: A. Create java_home C: \ Program Files \ Java \ j2sdk1.5.0 (JDK installation path)B. Create Path % Java_home % \ bin; % java_home % \ JRE \ binC. create classpath .; % java_home % \ Lib; % java_home % \ Lib \ tools. jar3. test whether the environment variable configuration is successful: start --> Run --> press cmd: The corresponding command appears in javac, instead of the error message, indicating that the configuration is successful!

--------------------------------------------- Gorgeous split line ---------------------------------------

Ii. Use Yui compressor to compress JS and CSS

Common examples (executed in cmd)

Java-jar D: \ yuicompressor-2.4.6 \ build \ yuicompressor-2.4.6.jar -- Type JS -- charset UTF-8 D: \ My. js-o d: \ my-min.js
 
Java-jar D: \ yuicompressor-2.4.6 \ build \ yuicompressor-2.4.6.jar -- type CSS -- charset UTF-8 D: \ my.css-o d: \ my-min.css

-Type: Specifies the file type to be packaged. The options include JS and CSS.
-Charset: Character Set
-O specifies the output file name. If this parameter is not specified, the compressed content will be output to the command line.
The final my.js and my.css are the debug source files to be packaged.

If the charset parameter is not given, the character set defaults to the system, where the UTF-8 is specified, and you actually need to modify it. For more information about the syntax and other parameters, see: http://www.julienlecomte.net/yuicompressor/

Use Yui compressor and DOS batch processing scripts to compress JavaScript and CSS, and addGzip of IIS, Add up to get85%Compression ratio between left and right. (WhereYui compressor has a compression rate of about 50%.You can also modify the parameters to obtain more compression ratios.

--------------------------------------------- Gorgeous split line ---------------------------------------

3. Prepare a batch processing tool

Three files:
Batch File: yuicompressor. bat
Registry File: yuicompressor. Reg
Compressed jar package: yuicompressor-2.4.6.jar

File directory: D: \ Server \ f2etools \ yuicompressor

How to Use yuicompressor. BAT for batch processing:
Right-click the entire folder and choose 【Yui-compressor JS/CSSBatch compression operations generate -min.css or-min. js. The source files remain unchanged. The source files are referenced during normal development of the project, and the compressed files are referenced before release.

Yuicompressor. bat batch fileCode:

CD " % 1 "
For / F % A in ( ' Dir / B *-min . Js' ) Do Call : Processdel : %
For / F % A in ( ' Dir / B *-min . CSS' ) Do Call : Processdel : %
For / F % A in ( ' Dir / B * . Js' ) Do Call : Processcompress : %
For / F % A in ( ' Dir / B * . CSS' ) Do Call : Processcompress : %

: Processdel

If Not[% 1]=[]Call: Deleteminfiles:% 1

Goto: EOF

: Processcompress

If Not[% 1]=[]Call: Compressfiles:% 1

Goto: EOF

: Deleteminfiles

If Exist "% Cd % \ % 1" Del "% Cd % \ % 1"

Goto: EOF

: Compressfiles

Java-jar D:\Server\F2etools\Yuicompressor\Yuicompressor-2.4.6.Jar% 1-O % ~ N1-min % ~ X1

Goto: EOF

Yuicompressor. reg registry function: Right-click the folder and select an option 【Yui-compressor JS/CSS]
Yuicompressor. reg registry file code:

Windows Registry Editor Version 5.00

[Hkey_classes_root \ directory \ shell \ compress JS/CSS files]
@="Yui-compressor JS/CSS"

[Hkey_classes_root \ directory \ shell \ compress JS/CSS files \ command]
@="D: \ Server \ f2etools \ yuicompressor. Bat % 1"

: Http://heiniu.me/tools/yuicompressor.rar

Note: Modify the directory paths in the two files.
Batch File: yuicompressor. BAT and Registry File: yuicompressor. Reg

--------------------------------------------- Gorgeous split line ---------------------------------------

4. packing compression pack-all-min.js

The file is as follows:
Batch files: pack-js.bat
Directory files to be packaged: pack-list.txt

Pack-js.bat code:

For / F % I in ( Packlist . Txt ) Do Type % I > Pack-all . JS

Java-jar D:\Server\F2etools\Yuicompressor\Yuicompressor-2.4.6.Jar --TypeJS -- charset UTF-8Pack-all.JS-o pack-all-min.JS

Pack-list.txt

Jquery . UI . Datepicker . JS
Jquery . UI . Dialog . JS
Jquery . UI . Draggable . JS
Jquery . UI . Mouse . JS

Usage:
Put these two files in the current JS folder, usually develop multiple source files, run the pack-js.bat to view the page effect, package into a compressed file before going online, the test is correct and then go online.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.