/* 336x280*/
对于网站应用而言,HTTP 请求是一件奢侈的事情,所以我们要尽量减少它。减少 HTTP 请求也正是网站性能优化的一个要素。通常通过手工合并会带来大量的维护问题。所以能交给机器做的就让机器来做吧。
之前有心的网友可能会发现,芒果的 CSS 并非一般的样式表引入方式,而是像下面这样:
<link href="/min/b=wp-content/themes/mangguo/css&f=reset.css,mangguo.min.css" rel="stylesheet" />
这就是使用 Minify 方案后的结果。那究竟 Minify 是什么?
“Minify 可以按需对 JavaScript 以及 CSS 文件进行合并、压缩以及缓存,以加快页面的载入速度。而安装 Minify 则极其简单,只需在网站根目录下上传程序目录即可。”
我们不妨来简单分解一下芒果这个怪异的 CSS 文件,首先通过访问根目录下的 minify 目录 (/min/) ,以参数形式指定文件目录 (参数 b),配置需要压缩合并的 CSS 单文件 (参数 f),然后动态输出独立的伪 CSS 文件。以芒果为例:
整站共有 reset.css、mangguo.min.css 两个样式文件。放置于 WordPress 对应当前主题的 CSS 目录下,那么基准 URL 指定为:
b=wp-content/themes/mangguo/css
文件列表指定为:
f=reset.css,mangguo.min.css
参数之间通过 & 符号连接。也可以不指定基准 URL,而缺省 b 参数直接配置文件组合:
<link href="/min/f=wp-content/themes/mangguo/css/reset.css,wp-content/themes/mangguo/css/mangguo.min.css" rel="stylesheet" />
当然 JavaScript 文件的压缩合并原理和 CSS 是一致的。
/* 336x280*/
版权所有,转载请注明出处。
转载自 <a href="http://www.mangguo.org/minify-merge-compress-javascript-and-css-file/" title="Minify,合并压缩 JavaScript 和 CSS 文件" rel="bookmark">Minify,合并压缩 JavaScript 和 CSS 文件 | 芒果小站</a>
已经有 12 条群众意见
- Tweets that mention Minify,合并压缩 JavaScript 和 CSS 文件 | 芒果 -- Topsy.com
#1/2010-07-30 18:42[...] This post was mentioned on Twitter by Moonfish and Kars, 芒果. 芒果 said: Minify,合并压缩 JavaScript 和 CSS 文件: 对于网站应用而言,HTTP 请求是一件奢侈的事情,所以我们要尽量减少它。减少 HTTP 请求也正是网站性能优化的一个要素。通常通过手工合并会带来大量的维护问题。所… http://bit.ly/9I2csS [...] 回应
- 丕子
#2/2010-07-31 01:02嗯,现在这个用的很多。 回应
- Firm
#3/2010-07-31 10:23载入的时候的确会快很多。 回应
- 拿铁客
#4/2010-07-31 12:35很实用的东西。 回应
- 雨花台
#5/2010-08-02 18:23好像不能使用绝对地址,比如 jquery 文件我想链接 google 服务器的就不行。 回应
- 老饕
#6/2010-08-04 19:20我的貌似不能用~~不解中~~ 回应
- 老饕
#7/2010-08-04 19:23对了~~可以交换一下友情链接吗? 回应
- 芒果 对 说
#8/2010-08-04 20:56贵站链接已经添加 http://www.mangguo.org/link 回应
- 老饕 对 说
#9/2010-08-06 12:30恩,我的也加上了~~多多交流! 回应
- 魏鹏
#10/2010-08-26 15:37您好!我也用上了这个组件,我转换出来的 css 和你的不一样。你 css 中有 ../ 转换出来的是 /wp-content/themes/mangguo/ 自动给加上了目录的绝对地址,而我的却还是 ../ 这样的话就是站点根目录了。请问你这个怎么实现的。具体修改配置文件的哪句话。 回应
- char1es_wu 对 说
#11/2010-12-14 09:04我实验了一个 YUI3 结合 Minify 现在有个两问题,1. 每次 Minify 合成的内容都会时时的显示出来,也就是说页面缓存没用到,2. Minify 错误把一张 PNG 图片和 CSS 文件合并了。 回应
- 芒果 对 说
#12/2010-12-15 00:08YUI3 有动态加载机制,没有 Minify 的必要。 回应
我简单说几句