使用Minify来压缩JS和CSS文件来提高网站性能

admin

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

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

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文件的内容?   

压缩单个文件：
比方说，你要服务于这个文件：  
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会自动通过重写机制找到它们。
当然也可以写成如下方式：
http://example.com/min/?b=wp-content/themes/default&f=default.css  
合并多个文件到一个文件下载：
用 ',' 分隔 f 参数的每一个文件名。  
比如，有如下CSS文件：
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  
简化基本路径：
如果你合并的文件共享同一父目录，你可以使用 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  



如果觉得URI太长，可以通过配置文件来指定group，编辑min目录下的groupsConfig.php文件，加入以下内容：

1. return array(
   
2. 'js' => array('//js/jquery-a.js', '//js/jquery-b.js', '//js/jquery-c.js'),//相对于DOCUMENT_ROOT
   
3. );

复制代码

之后就可以通过/min/?g=js来访问了

Minify在资源首次被请求的时候，会对多个文件进行合并，gzip，去除空格，注释等处理，然后会把处理的结果进行缓存，默认情况下是进行文件缓存，缓存的key以minify_开头，修改min/config.php文件，配置缓存文件存放的位置：

$min_cachePath = '/tmp';

除了通过文件进行缓存之外，Minify还支持Memcache缓存，修改min/index.php文件，加入以下代码：

1. require 'lib/Minify/Cache/Memcache.php';
   
2. $memcache = new Memcache;
   
3. $memcache->connect('localhost', 11211);
   
4. $min_cachePath = new Minify_Cache_Memcache($memcache);

复制代码

Minify支持两种debug方式，一种是通过firephp调试PHP错误，修改min/config.php文件，加入以下代码：

1. $min_errorLogger = true;

复制代码

另一种是通过在URL中加入flag进行错误调试，在min/config.php中加入

1. $min_allowDebugFlag = true;

复制代码

之后就能以http://example.com/min/f=jquery-a.js,jquery-b.js,jquery-c.js&debug=1方式进行调试了


项目地址：
google：http://code.google.com/p/minify/
github：https://github.com/mrclay/minify