芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
19

Minify,合并压缩 JavaScript 和 CSS 文件

作者 芒果/分类 代码/发布于 2010-07-30 18:22

对于网站应用而言,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

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/minify-merge-compress-javascript-and-css-file/" title="Minify,合并压缩 JavaScript 和 CSS 文件" rel="bookmark">Minify,合并压缩 JavaScript 和 CSS 文件 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 19 条群众意见

  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://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
  13. apollosaar /2012-03-22 00:01

    哈,看到一个了…不错, 回应

    #13
  14. apollosaar /2012-03-22 00:04

    yslow评分非常高了… 回应

    #14
  15. gardeningcn /2012-04-05 13:15

    是的 我们的网站也做了MINIFY优化,把原先的几个CSS都绑定在一起

    但现在想继续合并滚动图片的CSS代码 却遇到了难题

    不知各位能否给点意见
    相关网站:www.nbhuntop.com 回应

    #15
  16. 冠朔wordpress插件 /2012-04-26 10:51

    希望能与贵站交换个内页友情链接。我已在先本站的友情链接页面添加了贵站,请审核。
    冠朔wordpress插件
    http://www.guansoft.com
    全力搜集好用实用的 wordpress 插件 回应

    #16
  17. 芒果冠朔wordpress插件/2012-04-26 12:51

    已添加。 回应

    #17
  18. 冠朔wordpress插件芒果/2012-04-27 08:34

    非常感谢,合作愉快。 回应

    #18
  19. zhimag /2012-09-17 16:17

    我的开启后,CSS加载失败,不能正常显示,不知道为什么 回应

    #19

下面我简单说几句