WordPress代码高亮插件SyntaxHighlighter Evolved与缓存插件W3TC的JS minify冲突

好长时间没写文章,昨天发了一篇文章,结果发现浏览这篇文章时,浏览器直接就僵死了。一直要等到很久,Chrome才会提示页面冻结,是否要关闭页面。试了一下其他的浏览器,也都一样。

查了好久,没有眉目:(。后来发现,其他页面没有类似问题,就怀疑到了和这篇文章里面的内容有关。文章里比较特殊的就是黏贴了几行代码,用SyntaxHighlighter Evolved进行代码格式化显示。去掉这些内容,试了一下,还真好了!:(

然后就找SyntaxHighlighter Evolved插件的问题。网上还行也没有很直接的相关文章。转了一圈之后,又回来找自己的问题。

后来就怀疑到了W3TC(W3 Total Cache)的JS压缩。因为禁用掉JS浏览这个页面没问题。看来是W3TC在JS minify的时候,修改了SyntaxHighlighter Evolved的JS文件,引起的问题。

对比W3TC压缩之后的JS和SyntaxHighlighter Evolved的源代码,发现SyntaxHighlighter Evolved的JS文件syntaxhighlighter3/scripts/shCore.js里的一个Tab“ ”被替换成了Space“ ”引起了SyntaxHighlighter前端代码逻辑错误!大概造成了JS循环,引起浏览器僵死。

SyntaxHighlighter Evolved JS源文件:

W3TC在JS minify后的JS源文件:

其实这也不直接是W3TC的问题,而是它使用的JSMin代码压缩器会把Tab转成Space。其他的JS压缩器倒好像没这个问题。

解决办法当然最好是SyntaxHighlighter Evolved的作者fix掉这个问题。

当然这就没这么快了。临时可以通过关闭W3TC的JS minify功能。
当然更精确点的做法是让W3TC只忽略掉对shCore.js的压缩。
这可以通过到W3TC配置的Minify页。Advanced小结有一个“Never minify the following JS files:”把这个JS文件的相对路径输入、保存并清空W3TC缓存就可以了。

马路写手
每天进步一点点