Server-side merging and compressing JS and CSS files

One of the most important of the best practices in Web performance optimization is to reduce HTTP requests, which is also the largest rule in YSlow. The main scenarios for reducing HTTP requests include merging JavaScript and CSS files, CSS sprites, image maps, and using the data URI to encode pictures. CSS Sprites and image maps are now ubiquitous, but because IE6 and IE7 do not support data URIs and performance issues, this technology is not yet widely used. At present, most of the JavaScript and CSS files in the number and development of the same, a small amount of web pages will be based on local consolidation, a considerable number of these mergers are selectively manually completed, each new merger needs to be completed locally and uploaded to the server, compare the casual and cumbersome, The same file compression also has a similar situation. And the use of service-side consolidation and compression, we can according to the development of the logic as far as possible to reduce the size of the file, using the rules of the URL in the Web page to automatically achieve the merging and compression of files, this will be quite flexible and efficient.

YUI Combo Handler

July 2008 Yui team announced in Yahoo! CDN on the Yui JavaScript components to provide combo handler services. Combo Handler is Yahoo!. Developed an Apache module that enables developers to easily merge JavaScript and CSS files through URLs, greatly reducing the number of file requests. For example, using YUI2 rich-Text editor components on a page requires the introduction of multiple JavaScript files, which are commonly used in the following ways:

<script src= "Http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js" ></script> <script src= "Http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js" ></script> <script src= "Http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js" ></script> <script src= "Http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js" ></script> <script src= "Http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js" ></script> <script src= "Http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js" ></script>

After using the combo handler service, the above code can be written as:

<script src= "Http://yui.yahooapis.com/combo? 2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js& 2.8.0r4/build/container/container_core-min.js& 2.8.0r4/build/menu/menu-min.js& 2.8.0r4/build/element/element-min.js& 2.8.0r4/build/button/button-min.js& 2.8.0r4/build/editor/editor-min.js "></script>

In addition to a slight reduction in the readability of the code, the use of the combo handler service greatly reduces the number of HTTP requests and also reduces the amount of URL code, which is critical for Web performance optimization. So, then Yui starting from 2.6.0, its core components Yui loader built-in combo handling function, that is, using Yui loader, By configuring the Combine property, you can combine multiple JavaScript or CSS files to be loaded in the form of a combo handler service, as long as the static file's server supports combo handler. In Yui when combine is configured to True, the CDN default is to use the Yahoo! CDN (http://yui.yahooapis.com), so there is no problem. This is one of Yui's most fascinating places.

Unfortunately http://yui.yahooapis.com in China's speed is not good, originally China Yahoo provides http://cn.yui.yahooapis.com/, but has not provided combo handler service, at the same time for various reasons, its update in Yui After the 2.7.0, it stalled. What's worse, Yahoo!. Development of the support combo handler Apache module, although it is rumored to be open source, but at least it is still private technology, to use the need to implement similar functions, so the domestic application of similar technology is not too much.

Minify

In Google code, there is a PHP open source project called Minify, which combines, streamlines, gzip compresses and caches JavaScript and CSS files. Its file merging function is very similar to Combo Handler, except that the syntax of the URL is slightly different. If Yahoo! The CDN is installed with Minify, then the rich-Text editor code is written in Minify's default format:

<script src= "http://yui.yahooapis.com/min/f= 2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js, 2.8.0r4/build/container/container_core-min.js, 2.8.0r4/build/menu/menu-min.js, 2.8.0r4/build/element/element-min.js, 2.8.0r4/build/button/button-min.js, 2.8.0r4/build/editor/editor-min.js "></script>

Local use minify is very simple, only need Apache + PHP environment on OK:

Install Apache + PHP (Windows, Mac).

Download Minify source, unzip, and then copy the Min folder to the specified root directory, such as localhost. At this time the URL of the writing is probably http://localhost/min/f= ...

Enable the Apache MoD rewrite module, and then under the Min folder, create a new. htaccess file and add the following rewrite rule:

<ifmodule mod_rewrite.c> Rewriteengine on # Your may need rewritebase on some servers # If you do all the MoD rewrite settings are still invalid, please try the city to enable the following sentence #RewriteBase/min # rewrite URLs like "/min/f= ..." to "/min/?f= ..." Rewriterule ^ ([bfg]=.*) index.php?$1 [L,ne] </IfModule>

If you do not enable the MoD rewrite feature, the Minify URL will resemble http://localhost/min/index.php?f= ..., which is bad for the caching of the client and intermediate servers, and the URL after the MoD rewrite is enabled is similar to HTTP ://localhost/min/f= ..., not only solve the problem ahead and shorter.

4. Configure minify, that is, edit min/config.php file

$min _enablebuilder = true; //Can be used when local use http://dwn/m in/builder/to configure, set to False //$min _cachepath = ' c:windowstemp '; //$min _cachepath = '/tmp '; //$min _ CachePath = preg_replace ('/^d+;/', ', ', Session_save_path ()); //Select one, remove the annotation set temporary cache directory, this can reduce the program operation to raise High-performance $min _serveoptions[' maxage '] = 1800; //Set browser cache time, To improve performance It is recommended that this time be set as long as possible, such as 315360000 //If you need to update the static file without changing the URL, you can use a timestamp-like method, ///http://localhost/min/f=example/ EXAMPLE.CSS&20100601.CSS //recommended that static files be managed with version number, each modification requires an upgrade version number, which eliminates the need for timestamp //As http://localhost/min/f=example/ Example_1_0_1.css $min _serveoptions[' Minapp '] [' maxfiles '] = ten ///parameter F Gets the number of parameters, that is, the number of merged files, which can be fully increased, such as, Of course, you may encounter the maximum URL problem, after which there will be an explanation $min _documentroot = '; //$min _documentroot = substr (__file__, 0, strlen (__file__)-15) ; //$min _documentroot = $_server[' subdomain_document_root ']; //When $min_documentroot is empty, its value is $_server[' Document_root '], //But the merged file is not in $_server[' doCument_root '] will cause a 400 error, //This time you can enable line 2nd or line 3rd