加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

Minify,合并压缩 JavaScript 和 CSS 文件

发布时间:2018-10-07 18:01:50 所属栏目:运营 来源:站长网
导读:对于网站应用而言,HTTP 请求是一件奢侈的事情,所以我们要尽量减少它。减少 HTTP 请求也正是网站性能优化的一个要素。通常通过手工合并会带来大量的维护问题。所以能交给机器做的就让机器来做吧。 之前有心的网友可能会发现,芒果的 CSS 并非一般的样式表

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

出处:http://www.mangguo.org/

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读