0%

hexo next github page 性能优化记录

rocky.gif

step1

站点使用 hexo next 主题,配置文件中已经带了使用 jsDelivr cdn 的资源配置实例,用户启用便可

根目录下themes\next\_config.yml文件中,vendors 项下,所有资源皆可配置使用 jsDelivr cdn

1
2
3
4
5
6
7
8
9
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 3.4.1
# Example:
jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
# jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
# jquery:

step2

站点静态资源,也使用 jsDelivr cdn

根目录下themes\next\_config.yml

1
2
3
4
5
6
7
# Assets
# css: css
# js: js
# images: images
css: https://cdn.jsdelivr.net/gh/evanhongyousan/evanhongyousan.github.io/css
js: https://cdn.jsdelivr.net/gh/evanhongyousan/evanhongyousan.github.io/js
images: https://cdn.jsdelivr.net/gh/evanhongyousan/evanhongyousan.github.io/images

step3

使用图片懒加载,减少首屏加载时间

项目根目录下,执行 npm install hexo-lazyload-image --save

根目录下_config.yml

1
2
3
4
# 图片懒加载
lazyload:
enable: true
onlypost: false

step4

问题

博客开启了 post_asset_folder 选项

根目录下_config.yml

1
post_asset_folder: true;

并在文章中使用 这种方式引用图片,则打包出来的图片,会是这种形式:

1
https://evanhongyousan.github.io/2020/05/23/landing-page-builder-introduct/image2020-5-14_17-40-17.png

可以看到图片并不在 images 文件夹中,则文章图片并未使用 cdn 加速

处理

执行 npm install hexo-tag-asset-img --save

根目录下_config.yml

1
asset_img_url: https://cdn.jsdelivr.net/gh/evanhongyousan/evanhongyousan.github.io

打包发布后,可以看到文章对图片的引用已经变更:

1
https://cdn.jsdelivr.net/gh/evanhongyousan/evanhongyousan.github.io/2020/05/23/landing-page-builder-introduct/image2020-5-14_17-40-17.png

step 5

完成上述步骤后,可以看到页面加载仍有资源阻塞

1
2
# 404
https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext
step5.png

则使用 fonts.googleapis.com 镜像处理字体资源文件加载失败的问题

根目录下_config.yml

1
2
3
4
5
6
7
font:
# Use custom fonts families or not.
# Depended options: `external` and `family`.
enable: true

# Uri of fonts host, e.g. //fonts.googleapis.com (Default).
host: //fonts.loli.net

使用的 cdn、插件、镜像

众筹开高达