芒果小站

/* 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 是一致的。

项目托管地址:http://code.google.com/p/minify

/* 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 条群众意见

  1. Tweets that mention Minify,合并压缩 JavaScript 和 CSS 文件 | 芒果 -- Topsy.com /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 [...] 回应

    #1
  2. 丕子 /2010-07-31 01:02

    嗯,现在这个用的很多。 回应

    #2
  3. Firm /2010-07-31 10:23

    载入的时候的确会快很多。 回应

    #3
  4. 拿铁客 /2010-07-31 12:35

    很实用的东西。 回应

    #4
  5. 雨花台 /2010-08-02 18:23

    好像不能使用绝对地址,比如 jquery 文件我想链接 google 服务器的就不行。 回应

    #5
  6. 老饕 /2010-08-04 19:20

    我的貌似不能用~~不解中~~ 回应

    #6
  7. 老饕 /2010-08-04 19:23

    对了~~可以交换一下友情链接吗? 回应

    #7
  8. 芒果老饕/2010-08-04 20:56

    贵站链接已经添加 http://www.mangguo.org/link 回应

    #8
  9. 老饕芒果/2010-08-06 12:30

    恩,我的也加上了~~多多交流! 回应

    #9
  10. 魏鹏 /2010-08-26 15:37

    您好!我也用上了这个组件,我转换出来的 css 和你的不一样。你 css 中有 ../ 转换出来的是 /wp-content/themes/mangguo/ 自动给加上了目录的绝对地址,而我的却还是 ../ 这样的话就是站点根目录了。请问你这个怎么实现的。具体修改配置文件的哪句话。 回应

    #10
  11. char1es_wuTweets that mention Minify,合并压缩 JavaScript 和 CSS 文件 | 芒果 -- Topsy.com/2010-12-14 09:04

    我实验了一个 YUI3 结合 Minify 现在有个两问题,1. 每次 Minify 合成的内容都会时时的显示出来,也就是说页面缓存没用到,2. Minify 错误把一张 PNG 图片和 CSS 文件合并了。 回应

    #11
  12. 芒果char1es_wu/2010-12-15 00:08

    YUI3 有动态加载机制,没有 Minify 的必要。 回应

    #12

我简单说几句

随机推荐

最新评论