Server-side merge and compress JS and CSS files

Author：Eve Cole Update Time：2010-06-14 18:58:46

2Merge and compress JavaScript and CSS files on the server side

One of the most important best practices for web performance optimization is to reduce HTTP requests, and it is also the most important rule in YSlow. Solutions to reduce HTTP requests include merging JavaScript and CSS files, CSS Sprites, Image Maps, and using Data URIs to encode images. CSS Sprites and image mapping are now widely available, but due to IE6 and IE7 not supporting Data URIs and performance issues, this technology has not been widely used. At present, the number of JavaScript and CSS files in most web pages is the same as when it was developed. A small number of web pages will be merged locally according to the actual situation. Quite a few of these merges are selectively done manually. Each new merge needs to be done locally again. Completing and uploading to the server is relatively casual and cumbersome, and the compression of the same file has a similar situation. Using server-side merging and compression, we can make the file granularity as small as possible according to the development logic, and use the URL rules in the web page to automatically merge and compress files, which will be quite flexible and efficient.

YUI Combo Handler

In July 2008, YUI Team announced that it would provide Combo Handler service for YUI JavaScript components on YAHOO! CDN. Combo Handler is an Apache module developed by Yahoo!, which allows developers to simply and conveniently combine JavaScript and CSS files through URLs, thus greatly reducing the number of file requests. For example, using YUI2's Rich Text Editor component on a page requires introducing multiple JavaScript files. The common methods are as follows:

After using the Combo Handler service, the above code can be written as:

In addition to slightly reducing the readability of the code, using the Combo Handler service greatly reduces the number of HTTP requests and also reduces the amount of URL code, which is crucial for Web performance optimization. Therefore, starting from YUI 2.6.0, its core component YUI Loader has a built-in Combo Handling function. That is, when using YUI Loader, by configuring the combine attribute, multiple JavaScript or CSS files to be loaded can be loaded in the form of using the Combo Handler service. Combined, as long as the static file server supports Combo Handler. In YUI, when combine is configured to true, the CDN defaults to using Yahoo! CDN ( http://yui.yahooapis.com ), so there is no problem. This is one of the most charming parts of YUI.

Unfortunately, the speed of http://yui.yahooapis.com in China is not very good. Originally, Yahoo China provided http://cn.yui.yahooapis.com/ , but it has not yet provided Combo Handler service. At the same time, due to various reasons, its Updates have stalled since YUI 2.7.0. What's worse is that although the Apache module developed by Yahoo! to support Combo Handler is reportedly planned to be open source, it is still a private technology at least for now. To use it, you need to implement similar functions yourself, so there are not many applications of similar technologies in China.