当前位置: 首页 > seo优化, 网站建设 > 正文

Minify压缩JS和CSS加快网站加载速度

Minify把CSS和JS压缩和削减(Minify:去掉空格回车符等),以及把多个CSS,JS文件整合到一个文件里。不要以为你的大带宽没有必要进行这类优化。使用它的理由更重要的是文件合并,而不是压缩,而是文件整合,这样可以减少浏览器端不断发出新的连接请求,就像FTP服务器一样,多个小文件和一个大文件耗时是不一样的。

Minify是用PHP写的,项目地址 http://code.google.com/p/minify/

一、安 装
1. 下载最新的Minify然后解压缩。
2. 复制"min"目录到你的DOCUMENT_ROOT(网站根目录)。

二、基本用法 
假设你有http://localhost/a.js,http://localhost/b.js两个文件。那么现在,你可以使用http://localhost/min/?f=a.js,b.js,看看浏览器返回结果,是不是minify的两个js文件的内容? 讲到这里你应该懂了一些。

1、压缩单个文件

比方说,你要设置这个文件:
http://example.com/wp-content/themes/default/default.css
下面是“Minify网址”该文件:
http://example.com/min/?f=wp-content/themes/default/default.css

换句话说,“f”参数设置为从WEB根路径下的目标文件(不需要路径/)”。由于CSS文件可能包含相对URI,Minify会自动通过重写机制找到它们。

2、压缩合并多个文件

(1)用','分隔f参数的每一个文件名。
比如,有如下js文件:
http://example.com/scripts/jquery-1.2.6.js
http://example.com/scripts/site.js
您可以通过Minify结合起来:
http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js

(2)这时候也可以简化基本路径
如果你合并的文件共享同一父目录,你可以使用b参数设置的f参数的基本目录(同样不包括前导或者后缀/字符)。
例如,以下两种写法效果相同:
http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js
http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

如果在Html中使用minify 不要忘记将&替换为& 

3、指定允许的目录

默认情况下,Minify不会限制任何DOCUMENT_ROOT范围内的*.css/*.js文件。如果你希望限制Minify存取某些目录,在min目录下的config.php中设置 $min_serveOptions ['minApp'] ['allowDirs']数组。例如:限制到/js和/themes/default目录,使用:

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

还可以用来设置别的东西,能达到一些更好的体验。

(1)为了获得最佳性能,编辑groupsConfig.php中的预指定文件组,看下面的例子

 

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

以上预指定js将结果合并成了如下文件:
http://example.com/js/Class.js
http://example.com/js/email.js
现在,您可以如此简化URL:
http://example.com/min/?g=js

(2)指定document_root目录以外的文件

在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
)
);

4、设置未来过期HTTP头 ,也就是缓存文件日期(当然熊猫第二课就准备讲另一种方法

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

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

<?php
// 之前确保min/lib目录设置到include_path
// add /min/lib to your include_path first!
require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php';
$jsUri = Minify_groupUri('js');
echo "<script type='text/javascript' src='{$jsUri}'></script>";

5、其他一些建议

(1)建议修改config.php中设置$min_cachePath到一个PHP可写目录。这将提高性能

(2)调试模式

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

 

 


本文固定链接: http://www.chnpanda.com/780.html | 熊猫博客 | 转载请注明出处,谢谢合作!

本文关键字: ,

Minify压缩JS和CSS加快网站加载速度:等您坐沙发呢!

发表评论

亲,不支持纯字母、符号评论哦~