# 【建站神器】CSS 和 JS 合并压缩工具 Minify 及其 WordPress 插件

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

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

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

下面两幅图分别是启用 Minify 之前和启用 Minify 之后网站请求时间的一个对比，可以看出启用 Minify 之后，资源的数量从7个变成了2个，加载的数据也从98K下降到29K。  
[[附件缺失 #13.png 1]][[附件缺失 #13.png]]  
使用 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 压缩。  
[[附件缺失 #22-500x630.png 2]][[附件缺失 #22.png]]

**安装过程**

把 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  
一般情况下选中即可.

---

**分类**：建站
**作者**：子龙
**链接**：https://octohz.com/p/3182