WordPress源代码压缩优化及常见问题的解决

先来看看效果：

意思就是让你的源代码看起来都挤在一起，这样如果别人想看你的源代码的话就不容易看懂了，（当然如果别人实在想看的话也可以通过某些软件的整理代码的功能来实现，比如IDEA的Ctrl+alt+L快捷键）。
最开始的时候我以为这个效果是网上的一些所谓的压缩软件实现的，比如什么GZippy和wp super cache,但是GZippy这种压缩插件只是压缩实际网页的大小，而不能让网页的源代码看起来很紧凑。不过网上有压缩源代码的方法，后来发现，网上那些 方法虽然能让源代码看起来很紧凑，也能实际压缩一点网页的大小，但是也会引起很多的问题，而且压缩网页大小的效果并不好。

不过没关系，我们要的就是让源代码看起来很紧凑的效果。
下面我就说说压缩的方法和常见问题的解决方式：
压缩网页的代码：
将这些代码插入到function.php的之间即可。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

//压缩html代码 function wp_compress_html(){      function wp_compress_html_main ( $buffer ){          $initial = strlen ( $buffer );          $buffer = explode ( "<!--wp-compress-html-->" , $buffer );          $count = count ( $buffer );          for ( $i = 0; $i <= $count ; $i ++){              if ( stristr ( $buffer [ $i ], '<!--wp-compress-html no compression-->' )) {                  $buffer [ $i ]=( str_replace ( "<!--wp-compress-html no compression-->" , " " , $buffer [ $i ]));              } else {                  $buffer [ $i ]=( str_replace ( "\t" , " " , $buffer [ $i ]));                  $buffer [ $i ]=( str_replace ( "\n\n" , "\n" , $buffer [ $i ]));                  $buffer [ $i ]=( str_replace ( "\n" , "" , $buffer [ $i ]));                  $buffer [ $i ]=( str_replace ( "\r" , "" , $buffer [ $i ]));                  while ( stristr ( $buffer [ $i ], '  ' )) {                      $buffer [ $i ]=( str_replace ( "  " , " " , $buffer [ $i ]));                  }              }              $buffer_out .= $buffer [ $i ];          }          $final = strlen ( $buffer_out );            $savings =( $initial - $final )/ $initial *100;            $savings = round ( $savings , 2);            $buffer_out .= "\n<!--压缩前的大小: $initial bytes; 压缩后的大小: $final bytes; 节约：$savings% -->" ;        return $buffer_out ; } ob_start( "wp_compress_html_main" ); } add_action( 'get_header' , 'wp_compress_html' );

但是后来发现这个功能让其他的一些功能出错了，比如js失效。（最开始我因为不知道什么原因还重新安装了一次WordPress）
不过没关系，网上也有解决办法，既然js失效了，我们可以让js代码不被压缩即可，只要把不想被压缩的代码（主要是js代码）放在下面的代码中即可。其实可以通过某些在线压缩js的网站来手动压缩js代码，然后替换原来的js代码也起到相同的效果。

1 2 3

<!--wp-compress-html--><!--wp-compress-html no compression--> 此处代码不会被压缩，主要是避免压缩带来的错误，比如JS错误 <!--wp-compress-html no compression--><!--wp-compress-html-->

还 有一个问题，我使用了代码高亮插件SyntaxHighlighter，然后发现压缩之后我在文章中插入的高亮代码也全部都被挤在了一起而且样式也都失效 了，因为这个功能也把CSS和js都压缩了。不过网上也有解决的办法，就是把下面的代码插入到function.php的之间即可，

1 2 3 4 5 6 7 8

function unCompress( $content ) {      if (preg_match_all( '/(crayon-|<\/pre>)/i' , $content , $matches )) {          $content = '<!--wp-compress-html--><!--wp-compress-html no compression-->' . $content ;          $content .= '<!--wp-compress-html no compression--><!--wp-compress-html-->' ;      }      return $content ; } add_filter( "the_content" , "unCompress" );

不过这个只能让高亮代码的换行效果生效，但是样式都失效了，界面很难看，这一点我还不能解决。

经过长期观察，发现js压缩报错无外乎2种情况：
1.js代码的作者偷懒，简写了某些语句。比如js的if结构一般是:

1 2 3 4 5

if (条件){      语句1; } else {      语句2; }

可有些人写js的时候，不知道是自视高超还是偷懒，就写成如下形式：

1 2 3 4

if (条件)      语句1; else      语句2;

这种偷懒格式，一旦压缩，就会破坏逻辑判断从而报错！如果压缩报错，并发现这种偷懒模式，只要写全代码即可。
2.js代码中存在//注释语句，比如：

1 2 3 4 5 6 7

<script type= "text/javascript" > function test(){ //定义一个变量： var string1 = 'newstring' ; alert(string1); } </script>

这种代码，一旦压缩就会变成这样：

1	<script type= "text/javascript" > function test(){ //定义一个变量：var string1 = 'newstring';alert(string1);}</script>

由于这个注释是半闭合的，因此压缩后就会伤及无辜，把后面的语句一起给注释了！从而报错！！
解决办法有2种：
i. 删除半闭合注释即可；
ii. 使用/* */ 全封闭注释 ；

PS： 一开始我看见这个功能很牛逼，我也想拿这个来装逼，但是后来发现这个逼不能装啊，虽然还是有很多网站使用了这个功能，但是我觉得还是会出现很多的错误，比 如js错误，虽然你可以通过上面的方法让一些js代码不被压缩，但是不能保证所有的js代码都不被压缩，而且又怕修改的时候出错，比如你新添加了插件就有 自己的js文件，那么你怎么能够保证所有的js文件你都可以保护好。我之前因为压缩了网页，然后我网页上方的轮播图效果不见了，我开始还不知道是什么原 因，所以害我后来重装了一次WordPress，后来才知道是这个功能搞的鬼。

所以结论就是这个功能其实不推荐大家使用。

参考网址：http://zhangge.net/4731.html