如果使用的是butterfly主题,hexo-neat会与主题的各类配置本身起冲突,如果有压缩静态页面资源的需要,可以参考Hexo博客静态资源加速的相关内容。
写在最前
这里不写前言,直接交代结论,用hexo-neat插件压缩静态页面,来提高响应速度,具体内容可以参考相应教程。
- Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源
- hexo next主题深度优化(六),使用hexo-neat插件压缩页面,大幅度提升页面性能和响应速度
以下内容基本为对第二条教程贴的搬运,可以直接查看第二条教程了解更多细节内容。
安装Hexo-neat插件
代码语言:javascript复制npm install hexo-neat --save
配置
在~/Hexo/_config.yml文件添加
代码语言:javascript复制# 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'
可能的报错
桃心的点击效果消失
如果参考过其他的美化教程,可能你的桃心点击效果消失了
需要在配置项的相应位置添加
代码语言:javascript复制# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/love.js'
gitalk.js文件报错
接着在压缩js的配置项
代码语言:javascript复制- '**/comments.gitalk.js'
总之就是那里报错添哪里。
压缩html时不要跳过.md文件
.md文件就是我们写文章时的markdown文件,如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。(教程原话)
压缩html时不要跳过.swig文件
.swig文件是模板引擎文件,简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。(教程原话)
那么古尔丹,代价是什么?
压缩的过程会极大的延长页面编译和部署的时间,说的通俗点,在你使用hexo generate
指令的时候,为了压缩静态页面,编译时间被大大延长了。这也是某种意义上的等价交换吧,以我为例,我现在都不怎么敢用hexo clean
指令,因为文章已经接近400篇,每次重新部署需要10分钟乃至更久。