"地瓜哥"博客网

　　昨晚（2013年3月8日）无意间发现“‘地瓜哥’博客网”使用的SyntaxHighlighter插件所引用的JavaScript文件竟然没有压缩。这对于追求网站加载的我来说，是不能容忍的！早在“高性能网站的十四条黄金法则”中，D瓜哥就已经介绍了提高网站加载速度的指导方法。正好周末无事，干脆就把“‘地瓜哥’博客网”优化一下。著小文一篇以记之！

压缩JavaScipt和CSS

　　JavaScript压缩代码的重要性不言而喻，如今的压缩工具也有不少，例如YUI Compressor，Google Closure Compiler，以及现在比较红火的UglifyJS。UglifyJS的出名是由于它代替Closure Compiler成为jQuery项目的压缩工具。由于jQuery如此出名的JavaScript库都使用UglifyJS进行压缩，想必UglifyJS有其自己的独到之处。所以，今天，D瓜哥就使用UglifyJS来压缩一下SyntaxHighlighter中的JavaScript文件。

　　想要UglifyJS，则必须安装NodeJS。目前NodeJS也支持Windows系统，但是在安装UglifyJS时，报错了。所以，还是劝大家在Linux下整吧。

　　在Linux系统中，NodeJS的安装很简单，网上也有很多介绍，这里就不再赘述。但是在安装UglifyJS时遇到了一些问题，这里简单说一下UglifyJS的安装吧。

　　现在UglifyJS已经升级到2，D瓜哥就直接拿第二版来解说。安装完NodeJS后，就可以安装UglifyJS了，很简单，使用如下指令即可：

npm install uglify-js -g

　　但是，这时会有一个权限问题；使用sudo后，又报“找不到命令npm”。这时，需要把NodeJS的路径加入到PATH环境变量中。在每个Linux用户的跟目录下，有个.profile是修改用户相关的环境变量的地方；而在/etc/.profile文件中，是负责维护整个系统的环境变量。由于，每个系统的情况不太一样，这里就不给出修改方式了。

　　经过上面的安装后，使用uglifgyjs压缩JavaSctipt文件时，还可能出现找不到uglifyjs命令的情况，请修改环境变量，把uglifyjs的路径加入到环境变量中去。这里假设NodeJS的目录是$NodeJS_Home，则uglifyjs的路径为：$NodeJS_Home/node_modules/uglify-js/bin。

　　最后，终于可以使用uglifyjs压缩Javascript文件了。 指令如下：

# 压缩文件
uglifyjs "$fileName" -o "$output_fileName"
# 还可以在最后加上参数-c、-m，提高压缩强度。

　　但是，使用几次之后，可能会发现有点不方便，是因为SyntaxHighlighter下JavaScript文件太多了。如何能刚方便的压缩呢？对于这种重复性的工作，我们可以将其交给Linux Shell来完成。Shell代码如下：

#!/bin/bash
# 压缩当前目录下的JavaScript文件
# D瓜哥 http://www.diguage.com/
# 2013年3月9日   开发
# 2013年3月11日  简化

path=`pwd`

mkdir min    # 存放一般压缩
mkdir min2   # 存放高强度压缩

for fileName in `ls *.js` 
do
   # 一般压缩
   uglifyjs "$fileName" -o "$path/min/$fileName"
   
   # 高强度压缩，会使用变量替换等比较激进的压缩方便。
   uglifyjs "$fileName" -o "$path/min2/$fileName" -cm
done

echo "OK"

　　由于D瓜哥好长时间不写Shell脚本了，所以这个脚本还不是尽善尽美，需要把这个脚本保存成文件，名字如cmprs.sh，然后将其分别放到SyntaxHighlighter/syntaxhighlighter2/scripts/和SyntaxHighlighter/syntaxhighlighter3/scripts/下各一份，然后运行如下命令，完成压缩：

# 使用脚本压缩文件
sh cmprs.sh

　　今天（2013年3月11日）又想到把SyntaxHighlighter的JavaScript代码压缩了。CSS文件是否需要压缩呢？打开一看，注释超多，必须压缩！但是，UglifyJS就爱莫能助了，只能使用YUI Compressor压缩。我的MyEclipse中安装了相关插件，然后一个文件文件压缩，在本机测试后，没有发现问题就直接上传到服务器上了。一切运行正常。

　　D瓜哥把压缩好的文件放到了新浪微盘上，需要的话，请自行下载：猛击这里下载！

去掉JavaScript的版本号

　　既然已经开始SyntaxHighlighter动手改正了，那就来得更彻底一点，在浏览器中查看网友的源代码，D瓜哥发现每个和SyntaxHighlighter相关的JavaScript文件路径后面都有一个版本声明！这对于开发环境来说，也许是个好事，可以防止缓存带来不必要的干扰。但是，对于部署到网页服务器上的，修改的机会很少，没必要加上版本声明；而且，版本声明还有可能影响到缓存，得不偿失！D瓜哥忍你好久了，这次也把你修理掉！

　　由于在路径后面添加的版本参数是这样的：“ver=2.1.364”。所以，先进入到SyntaxHighlighter目插件的录下，使用如下指令（D瓜哥在自己电脑上安装了Cygwin；否则在Windows上不能使用），找到添加版本声明的地方：

# 查找含ver的行数
grep 'ver' *.php
# 在Cygwin下运行该指令，结果竟然不现实行号！

　　运行结果如下：

$this->agshver  = '2.1.364';
$this->agshver  = '3.0.83c';
wp_register_script( 'syntaxhighlighter-core',             plugins_url('syntaxhighlighter/' . $this->shfolder . '/scripts/shCore.js'),            array(),                         $this->agshver );
……
# 对结果格式做了稍微的调整。

　　从运行的结果显示，在syntaxhighlighter.php文件（只有这么一个php文件）中有几十行（目测）还有wp_register_script()函数调用中，最后函数和版本号有关。D瓜哥在“使用Microsoft Ajax Content Delivery Network(CDN)优化WordPress加载速度”中就介绍过，把设置版本号的参数传成null就成功去掉*.js链接后面的版本号参数。由于，这些wp_register_script()函数调用中，最后的参数都是一个变量。结果中也显示了这个变量的赋值情况，所以，只要找到这个变量的赋值语句，然后将其赋值成null即可一劳永逸。打开syntaxhighlighter.php搜索“$this->agshver = ’2.1.364′;”，然后在113行，将其代码修改、保存成如下：

		// Dynamically set folder and version names for SynaxHighlighter
		if ( 2 == $this->settings['shversion'] ) {
			$this->shfolder = 'syntaxhighlighter2';
			$this->agshver  = '2.1.364';
		} else {
			$this->shfolder = 'syntaxhighlighter3';
			$this->agshver  = '3.0.83c';
		}

　　这时可以检测一下工作效果，打开浏览器，找一个有代码高亮的文章打开，查看一下网页源代码，看看原来的版本是不是消失了？！

去掉All in One SEO Pack的作者声明

　　在上一步的查看网页源代码中，有木有发现如下代码：

<!-- All in One SEO Pack 1.6.15.3 by Michael Torbert of Semper Fi Web Design[326,453] -->
<meta name="description" content="《Agile Web Development with Rails》抄书笔记(02)：Rails之初体验" />
<meta name="keywords" content="ruby,rails,动态语言,命令,目录结构,java,web" />
<link rel="canonical" href="http://www.diguage.com/archives/105.html" />
<!-- /all in one seo pack -->

　　这第一行和最后一行干毛啊？如此多余的代码，也应该去掉！

　　这个就很简单了，根据输出显示，这是由All in One SEO插件生成的。进入这个插件的目录下，打开aioseop.class.php，在里面搜索“Michael”，然后就显示到如下内容：

echo "\n<!-- All in One SEO Pack $this->version by Michael Torbert of Semper Fi Web Design";
if ($this->ob_start_detected) {
	echo "ob_start_detected ";
}
echo "[$this->title_start,$this->title_end] ";
echo "-->\n";

　　直接把第一行（D瓜哥目前修改的是1.6.15.3版的，在代码中应该是258行）注释掉，刷新页面，多出了个“[326,453] –>”。这是怎么回事？很纳闷！

　　后来又仔细找了一下代码，发现就在紧接着刚刚注释掉的代码就是输出那段奇怪字符的地方，直接将代码注释掉。世界又平静了！

　　另外，还有结束的那段代码，在aioseop.class.php文件的401行，直接注释掉即可。

去掉WP-PostViews的生成说明字符

　　网页源代码中，还有WP-PostViews的生成说明信息，进入到该插件的目录下，打开wp-postviews.php文件，搜索“Generated”，将其中的两行代码注释掉即可。

去掉WP-PageNavi的CSS版本号

　　“‘地瓜哥’博客网”还使用了WP-PageNavi，D瓜哥还注意到这个插件相关的CSS，还有版声明，这个也必须去掉。打开core.php，在最后几行代码中，有如下一行代码：

wp_enqueue_style( 'wp-pagenavi', $css_file, false, '2.70' );

　　将最后的参数改成null即可。

添加存档

　　经过多次测试，加上了“文章存档页面”。这应该是最大的改动了！经过这几天（从2013年3月9日到2013年3月11日）的试用，感觉非常好！博客本来就是存放自己有用资料的地方，加上这个存档页面，就不需要一页一页去翻了，找某篇文章真的很方便！推荐试用一下。

附录

　　另外，D瓜哥在改造过程中，还发现一个小疑问。网页源代码中，竟然还有如下两行代码：

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.diguage.com/blog/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.diguage.com/blog/wp-includes/wlwmanifest.xml" /> 

　　因为以前的“地瓜哥”被插过，所以D瓜哥就很警觉。然后用Google百度了一下，才了解了这方面的知识。加个附录说明一下。

wlwmanifest及RSD介绍

　　这两行标记都是针对Blog的离线编辑器开放接口所使用的。RSD是一个广义的接口，wlwmanifest是针对微软Live Writer编辑器的。有了这两个接口，在使用离线编辑器撰写博客的时候，就可以直接在软件中选择分类，标签等等内容了。如果不需要离线编辑，认为开放的两个接口不够安全，那么可以 在主题中functions.php中添加如下两行代码禁用掉RSD和wlwmanifest：

remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');

　　注意，关于关闭的代码，D瓜哥没有试验。特此说明。

 

参考资料

1. YUI Compressor官网
2. Google Closure Compiler
3. UglifyJS
4. WordPress wlwmanifest RSD的简单介绍