写在前面的话

如果你还没有搭建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: trueexclude:
# 压缩css
neat_css:enable: trueexclude:- '**/*.min.css'
# 压缩js
neat_js:enable: truemangle: trueoutput: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: truemangle: trueoutput: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'

优化Hexo性能，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度相关推荐

matlab win10 gpu加速,win10的Edge浏览器设置GPU硬件加速，大幅度提升浏览器性能
不知道大家对于GPU硬件加速是否有了解,这是现在的浏览器必备的功能,开启后能大幅度提升浏览器的性能,给我们更加顺滑的浏览体验.GPU硬件加速能够利用GPU的图形性能,加速渲染网页中的图像信息. 如果我 ...
【Android 日常学习】我逆向了微信数据库——微信如何大幅度提升交互性能
文章目录逆向策略准备参考资料步骤微信表设计消息表会话表代码逆向笔记学习部分总结我们所开发的App在进行会话聊天时,有一些非常明显的性能劣化.比如: 打开会话速度慢: 在同一个会话有 ...
FUTEX_SWAP补丁分析-SwitchTo 如何大幅度提升切换性能？
作者简介胡哲宁,西安邮电大学计算机科学与技术专业大二学生. Google SwitchTo 由于协程本身对操作系统的不可见性,协程中出现的 BUG 往往不能通过一些已有的工具去排查.在谷歌内部有一套 ...
Visual C++利用Intel C++ 编译器提升多核性能与多媒体指令支持获取更高的程序效率与缩小程序体积
Intel c++编译器有下列优点,建议VC++项目开发采用intel c++编译器取代VS自带c++编译器: 与 Microsoft Visual C++ 相兼容,可以嵌入 Microsoft Vi ...
【TCP长连接】使用TCP长连接提升服务性能
1.概述在<性能优化篇-理论基础>中,我们知道了提升服务性能的两个思路,分别是提升服务并发能力和降低请求的响应时间(RT).一个请求的响应时间包括两部分,等待时间和执行时间.在<性 ...
Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源
为什么要压缩页面静态资源对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧.我个人觉得,如果能把页面的加 ...
Hexo文件压缩：使用hexo-neat插件压缩页面静态资源
目录为什么要压缩页面静态资源 hexo的压缩静态资源插件如何使用hexo-neat 在站点根目录下安装hexo-neat 为站点配置文件添加相关配置 hexo-neat插件踩坑记录跳过压缩文件的 ...
Hexo历险记之五幻丽插件
前言言接上文,在美化了主题之后,接下来要做的就是添加一些插件,来让你的博客更加完善和好看. 时隔四年,重启Hexo历险计划! Hexo历险记之五幻丽插件插件永久链接看一下对比,使用该插件之前和 ...
hexo 博客支持PWA和压缩博文
目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed ...

优化Hexo性能，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度

写在前面的话

为什么要压缩页面静态资源

hexo的压缩静态资源插件

如何使用hexo-neat

注意点

优化Hexo性能，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度相关推荐

最新文章

热门文章