写在前面的话
如果你还没有搭建Hexo博客成功的话，可以看看我写的这篇博客《手把手教你使用GitHub + Hexo搭建属于自己的个人博客》。
如果你搭建成功的话，可以看看关于这两篇博客《在Hexo 个人博客上添加实用功能》和《美化Hexo 个人博客》。
这是我优化后的个人博客：https://ayjcsgm.github.io/，加载速度快了很多。
为什么要压缩页面静态资源
对于个人博客来说，优化页面的访问速度是很有必要的，如果打开你的个人站点，加载个首页就要十几秒，页面长时间处于空白状态，想必没什么人能够忍受得了吧。我个人觉得，如果能把页面的加载时间控制在三四秒内，就很不错了。
那么怎么提高hexo这个静态博客的页面加载速度呢？可以从以下的几个方面去入手：
- 将js文件尽可能放置到body的闭合标签之前，因为在加载或者引入js文件时是阻塞式的，如果我们在页面的最开始就引入这些js文件，而这些文件又比较大，会造成页面在渲染时长时间处于白屏状态。
- 尽量避免去引用访问速度非常低下的cdn或者图片，可以改用访问速度更快的cdn，或者将难以迅速加载的图片保存到自己的站点目录下，以免在加载图片时耗费了大量的时间，最后还加载不出来。
- 对页面的静态资源进行压缩，包括css、js和html等文件。我们自己添加的css和js文件为了可读性，往往会有很多换行和空格，这些对于浏览器来说并没什么卵用，甚至还会降低渲染页面的速度。至于html文件，由于Markdown转成html的bug，会导致页面存在大量的空白，如果你查看下页面的源代码，就会发现这些大量的空白符，十分难看。这也会造成页面渲染的性能问题。
hexo的压缩静态资源插件
网上有很多相关的博文，常规的做法是使用gulp来进行压缩，gulp是Node.js下的自动构建工具，通过一列的task执行步骤进行自动流程化处理。
使用这种方法会比较麻烦，每次压缩时还需要输入额外的命令，比较繁琐，个人不是很喜欢，有兴趣的可以去自己了解下相关的东西。这篇教程里很多详细的说明，里边有说到gulp的使用，绝对的精品文章。
这里我选择的是由rozbo大佬开发的hexo-neat压缩插件，配置简单，无需额外命令，你只要使用原本的调试三连或者部署三连就可以自动帮你完成静态资源的压缩！
如何使用hexo-neat
1、在站点根目录下安装hexo-neat
npm install hexo-neat --save
2、在根目录下的配置文件_config.yml添加相关配置，可以加在最后面
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
注意点
1、跳过压缩文件的正确配置方式
如果按照官方插件的文档说明来配置exclude，你会发现完全不起作用。这是因为配置的文件路径不对，压缩时找不到你配置的文件，自然也就无法跳过了。你需要给这些文件指定正确的路径，万能的配置方式如下：
neat_css:
enable: true
exclude:
- ‘**/*.min.css’
2、压缩html时不要跳过.md文件
.md文件就是我们写文章时的markdown文件，如果跳过压缩.md文件，而你又刚好在文章中使用到了NexT自带的tab标签，那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。
3、压缩html时不要跳过.swig文件
.swig文件是模板引擎文件，简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件，那么你将会发现，你的所有页面完全没有起到压缩的效果，页面源代码里依然存在着一大堆空白。
4、点击的桃心效果消失
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/love.js'
5、gitalk js文件报错
在上面的代码底部加入如下代码
- '**/comments.gitalk.js'
6、jquery pjax min js报错
我这里的 jquery pjax min js是指的加入pjax前需要以来的两个cdn文件，一个是jq，一个是它，我将它下载到了本地，不要在意这些细节~
同样加入如下代码
- '**/jquery_pjax_min_js.js'