联系站长! 傻子-跸西blog 傻子-跸西微blog
如需使用回复可见功能
请回复后刷新所在页面

顶部

底部
Feed on
Posts
Comments

Minify 是一个使用 PHP5 开发的应用,可以帮你合并以及压缩 CSS 和 JS 文件, 通过遵循一些 YSlow 的优化规则来提高网站的性能。它会合并多个CSS 或者 JavaScript 文件,移除一些不必要的空格和注释,进行 gzip 压缩,并且会设置浏览器的缓存头。

我们知道大多数浏览器都有单个域名并发请求数限制,所以如果一个页面中存在很多的资源,比如 CSS 和 JavaScript 文件,那么明显会降低网站的加载速度,比较好处理方式就是把多个文件通过一个请求来访问,这样既不会影响之前的文件维护,又会减少资源的清楚数量,Minify 就是为之而生。

下面两幅图分别是启用 Minify 之前和启用 Minify 之后网站请求时间的一个对比,可以看出启用 Minify 之后,资源的数量从7个变成了2个,加载的数据也从98K下降到29K。
1

使用 Minify

下载最新的 Minify,然后解压文件到“min”文件夹,并上传到网站的根目录下。

假设网站域名是 http://example.com,那么访问 http://example.com/min/,我们会看到一个“Minify URI Builder”,我们可以输入需要进行合并的文件URI,如下:

Minify URI Builder

点击 Update 之后,系统会自动生成一个合并后的 URI:http://example.com/min/?b=js&f=jquery-a.js,jquery-b.js,jquery-c.js。

Minify 在资源首次被请求的时候,会对多个文件进行合并,gzip,去除空格,注释等处理,然后会把处理的结果进行缓存,默认情况下是进行文件缓存,当然也支持 Memcached 缓存。
WP Minify

对于 WordPress 博客来说,就不需要上面这些复杂的步骤了,我们直接下载一个 WP Minify 的插件即可,这个插件会自动获取页面中所有 JavaScript 和 CSS 文件,然后自动合并成两个文件(JS 和 CSS 分别一个),并且自定 Gzip 压缩。
2

安装过程

把 WP Minify 上传到 “wp-content/plugins/”文件夹内,如果在后台中安装则可跳过此步。
确保”wp-content/plugins/wp-minify/cache”是可写的。 如果插件使用失败,尝试把”wp-content/plugins/wp-minify/cache”的权限改为777。
在后台中激活 WP Minify 插件。

Support this plugin! 支持插件作者
Support this plugin
这里建议选择”Do not display “Page optimized by WP Minify” link.”,这样博客底部就不会出现使用 WP Minify 的信息,当然如果有余力可以为作者捐赠。

General Configuration 基本设置
Enable JavaScript Minification,Enable CSS Minification,Enable HTML Minification
这里就是 WP Minify 中最重要的设置了:决定是否压缩合并 JS,CSS,HTML,建议打开 JS 和 CSS 的压缩,HTML 压缩除非配合缓存类插件,否则个人不推荐打开,如果遇到了开启 HTML Minification 致使 Meta 信息丢失的问题,请参考最下面的一些补充。另外,打开 HTML 压缩后,页面生成时间在我的博客首页上约慢了 0.03s ~ 0.08s,在页面生成时间和传输大小上的取舍,就是仁者见仁,智者见智了。简单的测试对比可以参考下面的补充。

Debugging 除错设置
Combine files but do not minify,Show minify errors through FirePHP
这两个选项主要用于 JS 代码的调试,由于 JS 代码经常用换行来作为一行代码的结束标记,但是JS在压缩后会去除多余的换行,导致 JS 不能识别结束标记而出错(养成良好的使用”;”作为代码的结束标记的习惯很重要啊),第一个选项可以使 JS 仅合并而不被压缩,第二个选项可以在 FirePHP 中显示压缩合并过程中的错误。

Local Files Minification 本地文件压缩
JavaScript / CSS files to exclude from minify (line delimited)
如果不想压缩合并特定的文件,可以在这里填入相关文件的名称,以回车为隔断。
URIs on which WP-Minify parsing will be disabled (line delimited)
可以对特定的路径和文件禁止 WP Minify,以回车为隔断。

Non-Local Files Minification 非本地文件压缩
Enable Minification on External Files
允许压缩外部文件,除非需要排除大批量的 JS 或者 CSS 文件,作者推荐不打开。
JavaScript / CSS files to include into minify (line delimited)
只在 Enable Minification on External Files 关闭的情况下有效,如果 WP Minify 没有侦测到想要压缩合并的文件,可以在这里填入相关文件的路径,这个功能可以压缩合并站外的 JS 文件到你的服务器。以回车为隔断。(不能强制将当前页面未被调用的 JS 合并到当前页面调用的 JS 中)

Caching 缓存设置
Cache expires
设定压缩合并后的文件的过期时间,可以调成较长的一段时间。如果对任何 JS,CSS 文件进行了改动,一般情况下 WP Minify 都会根据文件的修改时间自动更新压缩合并文件,并更改请求参数中的m值,不必担心用户客户端的缓存问题。
Manually clear cache
手动清空缓存,如果 WP Minify 不能自动更新,比如用较旧的文件替换了较新的文件,那么手动清除一下缓存即可。

Tweaking/Tuning 细节调整
Use “pretty” URL
使用短网址,其实很简单,升级到 WP Minify 最新版本之后,压缩合并后的文件地址可以从 http://yoururl.com/wp-minify/min?f=1.js,2.js,3.js 变为 http://yoururl.com/wp-minify/cache/12345.js。选中这个选项可以使用新式 URL,更加美观。
Place Minified JavaScript in footer
是否将压缩合并后的 JS 移动到博客底部,一般情况下,博客加载的 JS 最好都不要放在博客底部,这样会影响 JS 的调用,导致页面的一些效果不能实现或者出现冲突。但是像 Google 分析或者 CNZZ、51la 的统计代码等,最好添加到footer.php中的最后位置,以提高页面的加载速度。
Force all JavaScript/CSS calls to be HTTPS on HTTPS pages
强制通过 HTTPS 协议传输 JS/CSS ,这个选项对于一般的博客并没有多大用处,如果博客支持 HTTPS 传输,可以打开,以确保传输过程中的安全性。
Extra arguments to pass to minify engine
为 minify 引擎加入额外的参数,具体参数可以参考 minify 引擎的文档。
Automatically set your Minify base per siteurl setting
一般情况下选中即可.

4 个评论! to “【建站神器】CSS 和 JS 合并压缩工具 Minify 及其 WordPress 插件”

  1. 春熙博客说道:

    嗯嗯 这个不错

  2. nina说道:

    首先博主的文章写得很好,我这个技术小白也能马上看明白,感谢博主分享!
    然后看懂了我也就开始实施了,按照博主的建议步骤,去下载了官方最新版本的minify.然后把里面的min文件夹整个上传到了我的网站根目录下面,接着就不对了,首先我访问http://mydomain.com/min/这种地址的时候,会自己跳转回我的首页homepage!这样我怎么进行下一步呢!博主的文章里没有提到这样的情况,我只能去别的地方找找,后来试着把min/config.php文件里的$min_enableBuilder = false;改成$min_enableBuilder = true;然后再去访问http://mydomain.com/min/,这回不跳转了自动跑到http://mydomain.com/min/builder/这个地址,但还是不会出现什么输入框,还是错误提示,建议我安装firephp什么的来检测问题所在。到现在为止我实在想不出什么办法了,不知道楼主又遇到这样的问题么?顺便说一下,我的网站本身是linux+apache2.2+php5.3.

  3. xiaofeng说道:

    这个你解决了吗 ?

  4. 什么最值买说道:

    这个插件很有用

有什么想法,说两句吧