優化Hexo性能，使用hexo-neat插件壓縮頁面，大幅度提升頁面性能和響應速度

寫在前面的話

如果你還沒有搭建Hexo博客成功的話，可以看看我寫的這篇博客《手把手教你使用GitHub + Hexo搭建屬於自己的個人博客》。

如果你搭建成功的話，可以看看關於這兩篇博客《在Hexo 個人博客上添加實用功能》和《美化Hexo 個人博客》。

這是我優化後的個人博客：https://ayjcsgm.github.io/，加載速度快了很多。

---

爲什麼要壓縮頁面靜態資源

對於個人博客來說，優化頁面的訪問速度是很有必要的，如果打開你的個人站點，加載個首頁就要十幾秒，頁面長時間處於空白狀態，想必沒什麼人能夠忍受得了吧。我個人覺得，如果能把頁面的加載時間控制在三四秒內，就很不錯了。

那麼怎麼提高hexo這個靜態博客的頁面加載速度呢？可以從以下的幾個方面去入手：

1. 將js文件儘可能放置到body的閉合標籤之前，因爲在加載或者引入js文件時是阻塞式的，如果我們在頁面的最開始就引入這些js文件，而這些文件又比較大，會造成頁面在渲染時長時間處於白屏狀態。
2. 儘量避免去引用訪問速度非常低下的cdn或者圖片，可以改用訪問速度更快的cdn，或者將難以迅速加載的圖片保存到自己的站點目錄下，以免在加載圖片時耗費了大量的時間，最後還加載不出來。
3. 對頁面的靜態資源進行壓縮，包括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'

---