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

随风随影 发布于 2013/08/19 23:11
阅读 1K+
收藏 14

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

最近在访问中遇到了连接数多的情况,我采用的是Minfy来减少连接数,压缩JS和CSS文件,以达到提高性能的目的。

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 

更多详细地使用资料请参见:http://www.webfxb.com/technique/optimize/201308/14_624.html

加载中
1
mallon
mallon
一直在用yui compressor
随风随影
随风随影
之前的版本YUI好像不能合并文件,今天搜了下资料,确实有合并了,谢谢提醒。
0
苏生不惑
苏生不惑
该评论暂时无法显示,详情咨询 QQ 群:点此入群
随风随影
随风随影
回复 @非良 : 兄弟说的对,虽然文件数多了,但是连接数少了很多,而且它还有缓存的功能。
非良
非良
浏览器的调用次数会少一些。还是有好处的。
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部