2011/08/04

WP Minify Tidy project

一個讓 WordPress 使用 Minify engine 的 Plugins,
它可以合併和壓縮 JS 和 CSS 檔案,改善(縮短)頁面加載時間。
在後來版本的 WP Super Cache 中也有提到。

雖然後來看看 WordPress 及一些 Plugins 代碼的展現已經比以前好很多了,
好像少了很多無用的換行符號及縮排,再透過這個 Plugins,
合併的寫法可以縮減代碼,避免長網址,
新增了一種 "pretty URL",合併所有 JS 檔案到一個檔案,
例如使用 "wp-minify/cache/1234abcd.js" 取代 "wp-minify/min/?f=file1.js,file2.js,...,fileN.js"

壓縮就像是 使用 Javascript CompressorCSS Tidy 一樣,
新版(1.1.6)的比以前多了 HTML Minification,
去掉換行、縮排、註解,
就像是 HTML Tidy Library Project
裡面使用 Tidy UI 一樣,

另外還有將 JS 放到尾部的作法,
不過這種合併及壓縮的寫法蠻容易出錯的,有些是位置順序的問題,
造成 JavaScript 失效,必須一一檢查,將之放到排除的欄位,
總而言之,這是個無所不用其極的 Minify 工具,
請小心服用...

測試會造成外掛 Comment Form Quicktags 的按鈕消失,
查很久才找出竟然是 wp-minify 的 HTML Minification 造成的,
找到一個企鵝君的說明
打開 wp-minify 下的 min/lib/Minify/HTML.php
找到段:
[php]// use newlines before 1st attribute in open tags (to limit line lengths)
$this->_html = preg_replace('/(<[a-z\\-]+)\\s+([^>]+>)/i', "$1\n$2", $this->_html);[/php]
意思是:在開放標籤的第一個屬性之後換行,以限制每行的長度。
將之 mark 起來,姑且試試,
一試才發現,竟然解決了!
而且原來取消這段,展示的代碼反而更漂亮簡潔,
全部變為一行了!爽耶 :)
這個功能應該做到 Plugins 的後台選項的。

不過這樣會導致HTML原始碼的可讀性下降,這個倒是並不很重要。
如果想要良好的可讀性,可以試試將
"$1\n$2"
改為
"$1 $2\n" 或者 "\n$1 $2"
不過這樣在我的部落格中會導致W3C Html驗證出錯,提示某些標籤沒有正確閉合,但是實際上並沒有什麼問題。


 
另外新發現,使用這個 Plugins,若開啟 CSS Minification,
預覽列印時,由於它的程式碼是使用 media='screen',例:
[xml]<link rel="stylesheet" href="XXX.css" type="text/css" media="screen"/>[/xml]
在列印模式時會整個排除掉,必須想辦法改成 media='all'
但在原始碼裡翻來找去卻找無要修改哪裡????
只好在 WP Minify 裡排除 Theme 的 CSS Style...

除了可以在 HTML 定義外,
也可以在 CSS 裡透過 @media 調用模式,
例如只給 print 列印模式顯示:
[css]@media print {
body {
background: none !important;
}
}[/css]

又發現這個 Plugin 合併的 JS 或 CSS 帶有 "~" 的網址,
功能好像會失效...?!

沒有留言:

張貼留言