怎样使用Minify压缩css和js文件

2016年8月31日 | 分类: 【技术】

参考:http://www.cnblogs.com/chinafine/articles/2224178
参考:http://www.chinaz.com/web/2011/0511/179286.shtml

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

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

官网:https://github.com/mrclay/minify

安装:

1. 下载最新的Minify然后解压缩到minify目录。
2. 复制”min”至网站根目录。
3. 修改config.php中设置$min_cachePath到一个PHP可写目录。

用法:

在线工具:

使用Minify Builder应用程序的URI:

https://amon.org/min/builder/

压缩单个文件:

需要压缩文件:

https://amon.org/wp-content/themes/default/default.css

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

https://amon.org/min/?f=wp-content/themes/default/default.css

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

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

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

需要压缩以下JS/CSS文件:

https://amon.org/scripts/jquery-1.2.6.js
https://amon.org/scripts/site.js

通过Minify结合起来:

https://amon.org/min/?f=scripts/jquery-1.2.6.js,scripts/site.js

简化基本路径:

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

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

https://amon.org/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js

https://amon.org/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中设置:

例如:限制到/js和/themes/default目录,使用:

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

“组”:更快的性能和更好的网址

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

下面是一个例子配置:

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

以上预指定js将结果是合并了如下文件:

https://amon.org/js/Class.js
https://amon.org/js/email.js

现在,您可以如此简化URL:

https://amon.org/min/?g=js

组:指定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   
      )   
    );  

未来过期HTTP头

Minify可以发送未来(1年)过期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>";  

调试模式

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

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

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

把min目录上传根目录,根目录打开https://amon.org/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 文件到安全位置。防止其他人访问。