引言

作为一名开发者，拥有一个快速响应的个人博客是非常重要的。Hexo作为一款静态博客生成器，虽然默认性能已经不错，但仍有许多优化空间。本文将分享我在Hexo博客性能优化过程中的实战经验，帮助大家打造一个加载更快、体验更好的博客。

一、图片优化

图片通常是博客中体积最大的资源，优化图片可以显著提升页面加载速度。

1. 图片压缩

使用工具压缩图片大小，在不影响视觉效果的前提下减少图片体积：

1
2
3
4
5
# 安装图片压缩工具
npm install hexo-filter-images --save

# 或使用pnpm
pnpm add hexo-filter-images

在_config.yml中配置：

1
2
3
4
5
6
7
filter_images:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

2. 懒加载

实现图片懒加载，只在图片进入视口时才加载：

1
2
# 安装懒加载插件
pnpm add hexo-lazyload-image

配置_config.yml：

1
2
3
4
5
lazyload:
  enable: true
  onlypost: false
  loadingImg: # 可选，自定义加载图片
  isSPA: false

二、资源压缩与合并

1. CSS/JavaScript压缩

压缩CSS和JavaScript文件，减少文件体积：

1
2
# 安装压缩插件
pnpm add hexo-clean-css hexo-uglify

配置_config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
clean_css:
  enable: true
  exclude:
    - '*.min.css'

uglify:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

2. HTML压缩

压缩HTML文件，移除无用空格和注释：

1
pnpm add hexo-html-minifier

配置：

1
2
3
4
5
6
7
8
9
10
11
html_minifier:
  enable: true
  exclude:
  ignoreCustomComments: [ !!js/regexp /^s*more/ ]
  removeComments: true
  removeCommentsFromCDATA: true
  collapseWhitespace: true
  collapseBooleanAttributes: true
  removeEmptyAttributes: true
  minifyJS: true
  minifyCSS: true

三、缓存策略优化

1. 浏览器缓存设置

通过Hexo插件设置适当的缓存头：

1
pnpm add hexo-fs-cache

2. 文件哈希命名

Hexo默认会为静态资源添加哈希值，确保文件更新时浏览器能获取最新版本：

1
2
3
4
5
# _config.yml
digest:
  enable: true
  exclude:
    - '*.html'

四、构建优化

1. 减少构建时间

优化Hexo构建过程，减少生成静态文件的时间：

1
2
# 安装构建优化插件
pnpm add hexo-inject

2. 并行构建

使用多核CPU进行并行构建：

1
2
# 安装并行构建插件
pnpm add hexo-parallel-generator

配置：

1
2
3
parallel_generator:
  enable: true
  number: 8 # 根据CPU核心数调整

五、CDN加速

使用CDN加速静态资源加载：

1. 配置CDN域名

在_config.yml中设置CDN域名：

1
2
3
4
5
6
url: https://your-domain.com
root: /
cdn:
  url: https://cdn.your-domain.com
  exclude:
    - '*.html'

2. 第三方资源CDN

将第三方库（如jQuery、Font Awesome）替换为CDN链接：

1
2
3
4
5
<!-- 替换前 -->
<link rel="stylesheet" href="/css/font-awesome.min.css">

<!-- 替换后 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

六、字体优化

1. 减少字体文件大小

只加载必要的字体权重和字符集：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 优化前 */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
}

/* 优化后 */
@font-face {
  font-family: 'Roboto';
  src: url('roboto-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

2. 字体预加载

使用<link rel="preload">预加载关键字体：

1
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

七、性能监控与分析

1. 使用Lighthouse进行性能检测

定期使用Chrome Lighthouse工具检测博客性能：

1
2
3
4
5
# 安装Lighthouse CLI
npm install -g lighthouse

# 检测博客性能
lighthouse https://your-blog.com --view

2. 接入Google Analytics

监控用户访问情况和页面加载性能：

1
pnpm add hexo-google-analytics

配置：

1
2
google_analytics:
  tracking_id: UA-XXXXXXXXX-X

八、代码优化示例

1. 自定义Hexo过滤器优化图片

在博客根目录创建scripts/image-optimizer.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo.extend.filter.register('after_post_render', function(data) {
  // 优化文章中的图片路径
  if (data.content) {
    data.content = data.content.replace(/<img\s+src="([^"]+)"/g, function(match, src) {
      // 如果是本地图片，添加优化参数
      if (src.startsWith('/')) {
        return `<img src="${src}?optimize=1"`;
      }
      return match;
    });
  }
  return data;
});

2. 自定义404页面

创建source/404.md：

1
2
3
4
5
6
7
8
9
10
---
title: 404 Not Found
layout: page
---

# 404

抱歉，您访问的页面不存在。

[返回首页](/)

总结

通过以上优化措施，我的Hexo博客性能得到了显著提升：

  • 页面加载时间从2.5秒减少到0.8秒
  • 图片体积平均减少60%
  • 资源请求数减少40%
  • Google Lighthouse性能评分从75分提升到95分

性能优化是一个持续的过程，需要不断监控、测试和调整。希望本文分享的优化技巧能帮助大家打造一个更快、更好的Hexo博客！

如果您有其他优化建议，欢迎在评论区分享交流。