Hexo框架(七):博客性能优化提升加载速度

前言:

本篇设置基于NEXT主题7.7.2版本!!

在使用博客的时候,总感觉不太流畅,页面性能感觉很低,所以,今天对博客进行了一些优化。

去掉无用的功能

尽量以实用为主,去掉一些不必要的功能,取消了DaoVoice,鼠标点击特效等。

使用CDN加载部分css、js

外部资源加载使用jsDeliver

CDN加速外部资源

压缩静态资源

我们自己添加的 css 和 js 文件为了可读性,往往会有很多换行和空格,这些对于浏览器来说是没有用的,甚至还会降低渲染页面的速度。同时,由于 Markdown 转成 html 的 bug,会导致页面存在大量的空白,我们可以通过查看页面源代码发现这些大量的空白符,这也会造成页面渲染的性能问题。

因此,我们需要对页面的静态资源进行压缩,包括 css、js 和 html 等文件。

我们可以使用 hexo-neat 插件进行压缩。hexo-neat 配置简单,无需额外命令,我们只需使用原本的调试、部署命令就可以自动完成静态资源的压缩。

安装插件:

1
npm install hexo-neat --save

然后我们需要在站点配置文件_config.yml 中添加以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 博文压缩
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'
- '**/fireworks.js'

但是好像这个插件有点点问题,我通常是不压缩js的,压缩js的时候会报错。

------ 本文结束  感谢阅读 ------