详解使用Minify压缩css和js文件


本文摘自PHP中文网,作者coldplay.xixi,侵删。

如何使用Minify压缩css和js文件

Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件。

一般情况下,网站速度的瓶颈都在前端,而最关键的就是资源的加载速度,但是大多数浏览器都有单个域名并发请求数限制,所以如果一个页面中存在很多的资源,比如CSS和JavaScript文件,那么明显会降低网站的加载速度,比较好处理方式就是把多个文件通过一个请求来访问,这样既不会影响之前的文件维护,又会减少资源的清楚数量,Minify就是为之而生。下面是一些被Minify采用的 Yahoo! 优化准则:

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

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

1. 下载最新的Minify然后解压缩到minify目录。

2. 复制"min"目录到你的DOCUMENT_ROOT,也就是网站根目录。

基本用法

例如:http://localhost/a.js,http://localhost/b.js两个文件。那么现在,你可以使用http://localhost/min/?f=a.js,b.js,看看浏览器返回结果,是不是minify的两个js文件的内容?

附译min目录下的README.txt

引用

该目录中的文件包含默认Minify设置,旨在简化整合您的网站。Minify将合并削减JavaScript或CSS文件,并进行HTTP压缩和缓存头。

推 荐

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

GETTING STARTED

最快的开始Minify的方法是使用Minify Builder应用程序的URI

访问您的网站:http://liqingbo.cn/min/builder/

压缩单个文件

比方说,你要服务于这个文件:

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

下面是“Minify网址”该文件:

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

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

合并多个文件到一个文件下载

用','分隔f参数的每一个文件名。

比如,有如下CSS文件:

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

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

您可以通过Minify结合起来:

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

简化基本路径

如果你合并的文件共享同一父目录,你可以使用b参数设置的f参数的基本目录(同样不包括前导或者后缀/字符)。

例如,以下两种写法效果相同:

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

在Html中使用MINIFY

在(X)HTML文件,不要忘记将&替换为&

指定允许的目录

默认情况下,Minify不会有任何DOCUMENT_ROOT范围内的*.css/*.js文件。如果你希望限制Minify存取某些目录,在config.php中设置

$min_serveOptions ['minApp'] ['allowDirs']数组。例如:限制到/js和/themes/default目录,使用:

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

"组":更快的性能和更好的网址

为了获得最佳性能,编辑groupsConfig.php中的预指定文件组

下面是一个例子配置:

1

2

3

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

 

组:指定document_root目录以外的文件

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

阅读剩余部分

相关阅读 >>

javascript如何将字符串反转

js如何利用键盘事件实现人物行走

js和html的区别是什么

javascrip注释符是什么

js控制输入框只允许输入小数

网页设计是要学 php 还是 java

javascript的重构技巧

javascript如何替换中间内容

详细介绍下js中的window与document

如何使用js控制下拉列表左右选择

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...