Detailed explanation of using Minify to compress css and js files

How to use Minify to compress css and js files

Minify is an application developed with PHP5, by following some Yahoo Optimization rules to improve website performance. It merges multiple CSS or JavaScript files, removes unnecessary whitespace and comments, performs gzip compression, and sets browser cache headers. Minify is very similar in design to Yahoo's Combo Handler Service, but Minify can merge any JavaScript and CSS files you want.

Generally, the bottleneck of website speed is at the front end, and the most critical thing is the loading speed of resources. However, most browsers have a limit on the number of concurrent requests for a single domain name, so if there are many requests on a page, Resources, such as CSS and JavaScript files, will obviously reduce the loading speed of the website. A better way to handle it is to access multiple files through one request. This will not affect the previous file maintenance and reduce the clear number of resources. Minify is made for this. The following are some Yahoo! optimization guidelines adopted by Minify:

Minify compresses and reduces CSS and JS (Minify: removes spaces, carriage returns, etc.), and integrates multiple CSS and JS files into one file . Don't think that your large bandwidth doesn't warrant this type of optimization. The more important reason for using it is file merging, not compression, but file consolidation, which can reduce the browser side from constantly issuing new connection requests. Just like an FTP server, multiple small files and one large file are time-consuming. Different.

Minify is written in PHP, project address http://code.google.com/p/minify/

1. Download the latest Minify and unzip it to the minify directory.

2. Copy the "min" directory to your DOCUMENT_ROOT, which is the root directory of the website.

Basic usage

For example: http://localhost/a.js, http://localhost/b.js two files. So now, you can use http://localhost/min/?f=a.js,b.js and see if the result returned by the browser is the content of the two js files of minify?

AttachmentREADME.txt

citation in the min directory

The files in this directory contain default Minify settings designed to simplify integrating your website . Minify will merge minified JavaScript or CSS files and perform HTTP compression and caching headers.

Recommendation

It is recommended to modify config.php to set $min_cachePath to a PHP writable directory. This will improve performance.

GETTING STARTED

The fastest way to get started with Minify is to visit your website using the URI of the Minify Builder application:

http://liqingbo.cn /min/builder/

Compress a single file

For example, you want to serve this file:

http://liqingbo.cn/ wp-content/themes/default/default.css

The following is the "Minify URL" file:

http://liqingbo.cn/min/?f =wp-content/themes/default/default.css

In other words, the "f" parameter is set to the target file from the WEB root path (no path / is required). Since the CSS file May contain relative URIs, Minify will automatically find them through the rewriting mechanism.

Merge multiple files into one file download

Separate each file name of the f parameter with ','.

For example, there is the following CSS file:

http://liqingbo.cn/scripts/jquery-1.2.6.js

http ://liqingbo.cn/scripts/site.js

You can combine it through Minify:

http://example.com/min/?f= scripts/jquery-1.2.6.js,scripts/site.js

Simplified base path

If the files you merge share the same parent directory, you You can use the basic directory of the f parameter set by the b parameter (also excluding leading or suffix/characters).

For example, the following two writing methods have the same effect:

http:// liqingbo.cn/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js

http://liqingbo.cn/ min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

Use MINIFY

in Html in (X)HTML files, do not Forgot to replace & with &

Specify allowed directories

By default, Minify will not have any *.css/*.js files in the DOCUMENT_ROOT scope. If you wish to restrict Minify's access to certain directories, set the

$min_serveOptions ['minApp'] ['allowDirs']

array in config.php. For example: to limit to the /js and /themes/default directories, use:

$min_serveOptions['minApp']['allowDirs'] = array('//js', '//themes/ default');

"Groups": Faster performance and better URLs

For best performance, edit the pre-specified file groups in groupsConfig.php

The following is an example configuration:

return array( 　　 'js' => array('//js/Class.js', '//js/email.js') 　　);

The above pre-specified js will result in merging the following files:

http://example.com/js/Class. js

http://example.com/js/email.js

Now, you can simplify the URL like this:

http://example.com/min/?g=js

Group: Specify files outside the document_root directory

在groupsConfig.php阵中,//是指向DOCUMENT_ROOT，但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录：　

return array( 　　'js' => array( 　　'//js/file.js' // file within DOC_ROOT 　　,'//../file.js' // file in parent directory of DOC_ROOT 　　,'C:/Users/Steve/file.js' // file anywhere on filesystem 　　) 　　);

未来过期HTTP头

Minify可以发送未来(一年)过期HTTP头。要启用该功能，您必须添加一个数字到URIs(例如/min/?g=js&1234 or /min/f=file.js&1234)，每当源文件修改时改变该数字。如果你使用SVN/CVS，你可以考虑使用修订版号作为该数字。

如果使用"组"来合并压缩你的文件，可以使用工具函数Minify_groupUri()来得到一个“版本”的URI。例如：

// 之前确保min/lib目录设置到include_path // add /min/lib to your include_path first! require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php'; $jsUri = Minify_groupUri('js'); echo " ";

调试模式

在调试模式下，Minify不压缩文件，而是发送合并后的带有行号的文件。要启用该模式，在config.php中设置为$min_allowDebugFlag为true，并增加"&debug=1" 到你的URIs.

例如：/min/?f=script1.js,script2.js&debug=1

注：对于该模式，注释风格的字符串正则表达式可能会导致问题。

把min目录上传根目录，根目录打开http://example.com/min/

Note:Please set $min_cachePath in /min/config.php to improve performance.

设置/min/config.php文件 ，$min_cachePath 有3个选择。

//$min_cachePath = ‘c://WINDOWS//Temp’; //$min_cachePath = ‘/tmp’; //$min_cachePath = preg_replace(‘/^//d+;/’, ”, session_save_path());

选择第2个，去除// .设置tmp属性777

在显示的界面中加入你想合并压缩的 js/css 路径，点击 ‘Update’ 之后会为你生成一个 url

如：http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js，css和JS分别合并，2个地址。

如果需要组合的文件很多，url 就会变得很长，Minify 支持 group，可以将这些文件分组，这样 url 中只需指定 g=group名字 就可以了。

安装完毕后删除min/builder/index.php文件。防止其他人登陆!后期如需编辑再次上传!

如有不明白的地方，可以给我留言，我们可以一起探讨一下。

推荐教程：《JS基础教程》

The above is the detailed content of Detailed explanation of using Minify to compress css and js files. For more information, please follow other related articles on the PHP Chinese website!