為什麽要壓縮頁面靜態資源

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

那麽怎麽提高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

在站點根目錄下安裝hexo-neat

npm install hexo-neat --save

為站點配置文件添加相關配置

下邊是我自己站點的相關配置，直接添加到站點配置文件_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‘  
 

hexo-neat插件踩坑記錄

由於在使用hexo-neat插件時，可以在命令窗口中看到各個文件的壓縮率，於是我就開始搗鼓跳過哪些文件可以讓效率更高。在鼓搗了一段時間之後，記錄下使用該插件的一些註意事項，避免日後重蹈覆轍，也希望能對各位看官有所幫助。

跳過壓縮文件的正確配置方式

如果按照官方插件的文檔說明來配置exclude，你會發現完全不起作用。這是因為配置的文件路徑不對，壓縮時找不到你配置的文件，自然也就無法跳過了。你需要給這些文件指定正確的路徑，萬能的配置方式如下：

neat_css:
  enable: true
  exclude:
    - ‘**/*.min.css‘

壓縮html時不要跳過.md文件

.md文件就是我們寫文章時的markdown文件，如果跳過壓縮.md文件，而你又剛好在文章中使用到了NexT自帶的tab標簽，那麽當hexo在生成靜態頁面時就會發生解析錯誤。這會導致使用到了tab標簽的頁面生成失敗而無法訪問。

當初為了找到這個原因花了我兩個晚上的時間，簡直是夜不能寐。

壓縮html時不要跳過.swig文件

.swig文件是模板引擎文件，簡單的說hexo可以通過這些文件來生成對應的頁面。如果跳過這些文件，那麽你將會發現，你的所有頁面完全沒有起到壓縮的效果，頁面源代碼裏依然存在著一大堆空白。

參考鏈接

1. GitHub項目地址
2. hexo博客壓縮優化
3. Hexo-Neat介紹

Hexo瞎折騰系列(5) - 使用hexo-neat插件壓縮頁面靜態資源