Hexo-Next提高加载速度

Posted 2021-03-14 lfri

Hexo作为纯静态博客最大的优点就是快，但要真正的快起来你可能需要做这些事情。

CDN加速

这里只是针对第三方静态文件的加速，修改Next主题配置文件_config.yml如下：

#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! See: https://theme-next.org/docs/advanced-settings
#! ---------------------------------------------------------------

# Script Vendors. Set a CDN address for the vendor you want to customize.
# Be aware that you would better use the same version as internal ones to avoid potential problems.
# Remember to use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix.
  _internal: lib

  # Internal version: 3.1.0
  anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js
  #anime:

  # Internal version: 4.7.0
  fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
  # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  #fontawesome:

  # MathJax
  mathjax: //cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_htmlorMML
  # mathjax: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML
  mhchem: //cdn.jsdelivr.net/npm/mathjax-mhchem@3
  # mhchem: //cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0
  #mathjax:
  #mhchem:

  # KaTeX
  katex: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
  # katex: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css
  copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
  copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css
  #katex:
  #copy_tex_js:
  #copy_tex_css:

  # Internal version: 0.2.8
  pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
  #pjax:

  # FancyBox
  jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  #jquery:
  #fancybox:
  #fancybox_css:

  # Medium-zoom
  mediumzoom: //cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js
  #mediumzoom:

  # Lazyload
  lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
  # lazyload: //cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js
  #lazyload:

  # Pangu
  pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js
  # pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js
  #pangu:

  # Quicklink
  quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js
  #quicklink:

  # DisqusJS
  disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
  disqusjs_css: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
  #disqusjs_js:
  #disqusjs_css:

  # Valine
  valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
  # valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js
  # valine:

  # Gitalk
  gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
  gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css
  #gitalk_js:
  #gitalk_css:

  # Algolia Search
  algolia_instant_js: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.js
  algolia_instant_css: //cdn.jsdelivr.net/npm/instantsearch.js@2/dist/instantsearch.min.css
  #algolia_instant_js:
  #algolia_instant_css:

  # PDF
  pdfobject: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
  pdfobject: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js
  #pdfobject:

  # Mermaid
  mermaid: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
  mermaid: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.0/mermaid.min.js
  #mermaid:

  # Internal version: 1.2.1
  velocity: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.min.js
  # velocity: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js
  velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.ui.min.js
  # velocity_ui: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js
  #velocity:
  #velocity_ui:

  # Internal version: 1.0.2
  pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
  # pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
  pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
  # pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
  #pace:
  #pace_css:

  # Internal version: 1.0.0
  three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
  three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
  canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
  canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
  #three:
  #three_waves:
  #canvas_lines:
  #canvas_sphere:

  # Internal version: 1.0.0
  canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js
  #canvas_nest:
  #canvas_nest_nomobile:

  # Internal version: 1.0.0
  canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js
  #canvas_ribbon:

View Code

图片懒加载

文字先出来，图片再慢慢出来，可以显著提高体验。

安装插件 npm install hexo-lazyload-image --save

修改项目配置文件_config.yml:

# 图片懒加载
lazyload:
  enable: true 
  onlypost: false
  loadingImg: /images/loading/loading.gif #如果不填写图片则使用默认的图片

 精简功能

功能涉及多个请求时会比较明显得拖慢加载速度，例如不蒜子、DaoVice，要考量这些功能是否真(hua)的(er)需(bu)要(shi)。（像我已经关掉了DaoVice 和 看板娘）

 

 

参考链接：

1. https://cloudycity.me/p/6cf2.html

2. https://www.return520.com/posts/8685/