• 欢迎访问ByWei.Cn,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,加入百味博客 QQ群
  • 已升级为最新版主题,并将持续优化改造中,支持说说碎语功能,可像添加文章一样直接添加说说,博客主题升级啦
  • 感谢您百度求点赞啊!百度网址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏百味博客吧
  • 博主热烈欢迎 软件定制开发 联系:http://www.bywei.cn

网页加载速度之js/css压缩

Web前端 bywei 7年前 (2013-04-08) 1598次浏览 0个评论 扫描二维码

Minify 压缩 JS 和 CSS

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

Minify 是用 PHP 写的,项目地址 https://github.com/mrclay/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://example.com/min/builder/

压缩单个文件

比方说,你要服务于这个文件:
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 会自动通过重写机制找到它们。

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

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

简化基本路径

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

在 Html 中使用 MINIFY
在(X)HTML 文件,不要忘记将&替换为&

指定允许的目录

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

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

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

为了获得最佳性能,编辑groupsConfig.php中的预指定文件组,下面是一个例子配置:
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

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

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

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。例如:
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 ""; ";

 

调试模式

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

注:对于该模式,注释风格的字符串正则表达式可能会导致问题。
更多问题请访问https://github.com/mrclay/minify


百味博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:网页加载速度之 js/css 压缩
喜欢 (1)
[微信扫一扫]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址