Hexo-neat插件优化提升访问效率

一、neat插件简介

对于任何一个网站来说，优化页面的访问速度是必须的，个人来说，只要加载页面十秒以上或长时间处于空白或加载状态，我会立刻关掉此页面的。你又能容忍几秒呢？

问：那么怎么提高hexo这个静态博客的页面加载速度呢？

答： 可以从以下的几个方面去入手：

将js渲染文件尽可能放置到（之前），因为html页面是自上而下（阻塞式）加载的，如果放在（前）会渲染完页面再显示内容，渲染画面是很费时的。

1，尽量避免去引用访问速度非常低下的cdn或者图片，可以改用访问速度更快的cdn，或者将难以迅速加载的图片保存到自己的站点目录下，以免在加载图片时耗费了大量的时间，最后还加载不出来。

2，Github配置cdn和私人picGo图床教程

3，对页面的静态资源进行压缩，包括css、js和html等文件。我们自己添加的css和js文件为了可读性，往往会有很多换行和空格，这些对于浏览器来无用，甚至还会降低渲染页面的速度。至于html文件，由于Markdown转成html的bug，会导致页面存在大量的空白，如果你查看下页面的源代码，就会发现这些大量的空白符，十分难看。这也会造成页面渲染的性能问题。

二、使用教程

安装插件

npm install hexo-neat --save

主配置_config.yml文末添加：（其中exclude板块是特别添加，针对你的静态资源进行筛选，筛选规则见下文易错配置）

 # hexo-neat
 # md博文压缩
 neat_enable: true
 # 压缩html（ejs，swig等也属于html格式片段）
 neat_html:
   enable: true
   exclude:
 # 压缩css  
 neat_css:
   enable: true
   exclude:
     - '*.min.css'
     - '**/*.min.css'
     - 'jquery.fancybox.min.css'
     - '**/live2d-widget/waifu.css'
 # 压缩js
 neat_js:
   enable: true
   mangle: true #打印日志
   output:
   compress:
   exclude: #排除文件
     - '*.min.js'
     - '**/*.min.js'
     - 'jquery.fancybox.min.js'
     - '**/live2d-widget/*.js'
     - '**/live2d-widget/*.min.js'

运行（因为mangle: true #打印日志,我们能看到运行流程）

【INFO neat the html:xxxx.md】先压缩md文件的换行和空白

注意md中不要带特殊标签<>的颜表情<(￣ˇ￣)/、<(ˉ^ˉ)>等，因为压缩转换为html后会变成

< (￣ˇ￣)/

，转义失败！！！

问：我是怎么发现的呢？

答：这在sakura主题中，原作者的source\links\index.md中就用了颜文字<(￣︶￣)，微微一笑，挖坑，这里补坑了啊。

【INFO neat the html: xxxx.ejs】压缩ejs配置文件（这里也有很多换行和空格），这是html片段格式文件。

如果配置了RSS订阅，这里还会atom.xml生成;本文里它无关紧要了。

现在是neat工作最重要的部分之一：压缩js和css。

这一部分最重要，因为sakura主题作者留了几个坑，不同引入js也需要灵活的设置exclude。

最后是（hexo generate）将md文章转换成html语言格式的过程。

三、灵活exclude配置（易错）

1，md压缩、html压缩

2，已经压缩过的css和js不用压缩：剔除exclude（*.min.css和 * .min.js）

3，特殊名字xx.xx.min.js的需要单独列出来（这里引用了fancybox图片弹窗效果，从压缩名单里单独剔除）

4，深目录的，需要单独列出来：（这里我引用了live2d看板娘的动画） 单用*/.min.js深目录跳过已压缩文件不行，这部分只好全部跳过压缩了：

5，如果你和我一样用的sakura主题，那么在themes\sakura\layout_partial\aplayer.ejs中，在34和35行中间添加一个>反括号。

<meting-js
<% for (i in theme.aplayer) {%>
    <%- i %>="<%- theme.aplayer[i] %>"
<% } %>
>
</meting-js>

说明一下，这是aplayer音乐的标签 <meting-js i ="aplayer[i] "> </meting-js> 一共有i项歌单，循环打印歌单信息，对，sakura原作者忘记加前的反括号了。

不加就会报错，如下

大概就是这样啦，在日志里找找错误的点，修改一下就好了。现在压缩后的页面加载速度起飞了呢。~