kbiao · kbiao · Sep 6, 2025 · Sep 6, 2025 · Sep 6, 2025 · Sep 6, 2025
diff --git a/.qoder/quests/hexo-theme-next-optimization.md b/.qoder/quests/hexo-theme-next-optimization.md
diff --git a/.qoder/quests/optimize-resource-loading.md b/.qoder/quests/optimize-resource-loading.md
@@ -0,0 +1,346 @@
+# Hexo博客资源加载优化设计
+
+## 1. 项目概述
+
+### 1.1 项目背景
+当前项目是基于Hexo 7.3.0框架构建的个人博客站点，使用landscape主题模板。在性能分析中发现存在多个资源加载问题，导致页面加载缓慢和用户体验下降。
+
+### 1.2 性能问题识别
+通过项目分析发现以下主要问题：
+- 重复的资源文件加载
+- 冗余的第三方库依赖
+- 缺乏资源压缩和优化
+- 不合理的资源加载策略
+
+## 2. 当前架构分析
+
+### 2.1 技术栈组成
+```mermaid
+graph TD
+    A[Hexo 7.3.0] --> B[Next主题]
+    A --> C[Landscape主题]
+    A --> D[核心插件]
+    D --> E[hexo-generator-*]
+    D --> F[hexo-renderer-*]
+    D --> G[hexo-deployer-git]
+    D --> H[hexo-leancloud-counter-security]
+    B --> I[fancybox插件]
+    C --> J[fancybox插件]
+```
+
+### 2.2 资源分布现状
+| 资源类型 | 位置 | 大小 | 问题 |
+|---------|------|------|------|
+| fancybox CSS | `/fancybox/jquery.fancybox.css` | 4.7KB | 重复存在 |
+| fancybox JS | `/fancybox/jquery.fancybox.js` | 47.6KB | 未压缩 |
+| fancybox 压缩JS | `/fancybox/jquery.fancybox.pack.js` | 22.6KB | 重复加载 |
+| 主题fancybox | `/themes/landscape/source/fancybox/` | 完整副本 | 完全重复 |
+| Google Fonts | 外部CDN | 不定 | 阻塞渲染 |
+
+### 2.3 主题配置冲突
+```yaml
+# _config.yml 中的冲突配置
+theme: next  # 配置为next主题
+# 但实际使用的是landscape主题
+
+# _config.next.yml 中
+fancybox: false  # Next主题中禁用了fancybox
+
+# themes/landscape/_config.yml 中
+fancybox: true   # Landscape主题中启用了fancybox
+```
+
+## 3. 性能瓶颈分析
+
+### 3.1 资源重复问题
+```mermaid
+flowchart LR
+    A[页面请求] --> B{主题检测}
+    B --> C[加载/fancybox/资源]
+    B --> D[加载/themes/landscape/source/fancybox/资源]
+    C --> E[47.6KB未压缩JS]
+    C --> F[22.6KB压缩JS]
+    D --> G[47.6KB未压缩JS副本]
+    D --> H[22.6KB压缩JS副本]
+    E --> I[总计: 140KB+]
+    F --> I
+    G --> I
+    H --> I
+```
+
+### 3.2 渲染阻塞因素
+1. **Google Fonts同步加载**
+   - 位置：HTML头部
+   - 影响：阻塞首屏渲染
+   - 加载时间：200-500ms
+
+2. **LeanCloud统计脚本**
+   - 配置：`enable_sync: true`
+   - 影响：同步执行阻塞页面
+   - 网络请求：每页面2-3个API调用
+
+3. **fancybox全局加载**
+   - 问题：所有页面都加载，即使不需要
+   - 大小：70KB+ (JS+CSS+图片资源)
+
+### 3.3 缺失的优化机制
+- 无CSS/JS压缩插件
+- 无图片压缩处理
+- 无CDN加速配置
+- 无资源合并策略
+
+## 4. 优化方案设计
+
+### 4.1 资源去重与清理
+```mermaid
+graph TD
+    A[现状分析] --> B[删除重复fancybox目录]
+    B --> C[统一使用主题内资源]
+    C --> D[清理无用配置]
+    D --> E[主题配置规范化]
+    E --> F[资源路径优化]
+```
+
+**实施步骤：**
+1. 删除根目录`/fancybox/`文件夹
+2. 仅保留`/themes/landscape/source/fancybox/`
+3. 修正`_config.yml`中的主题配置
+4. 清理`_config.next.yml`中的冗余配置
+
+### 4.2 资源压缩优化
+```mermaid
+graph LR
+    A[安装压缩插件] --> B[hexo-all-minifier]
+    B --> C[HTML压缩]
+    B --> D[CSS压缩]
+    B --> E[JS压缩]
+    B --> F[图片压缩]
+    C --> G[减少40-60%体积]
+    D --> G
+    E --> G
+    F --> G
+```
+
+**配置方案：**
+```yaml
+# _config.yml 新增配置
+html_minifier:
+  enable: true
+  exclude: []
+
+css_minifier:
+  enable: true
+  exclude: ['*.min.css']
+
+js_minifier:
+  enable: true
+  exclude: ['*.min.js']
+
+image_minifier:
+  enable: true
+  interlaced: false
+  progressive: false
+```
+
+### 4.3 异步加载策略
+```mermaid
+sequenceDiagram
+    participant Browser
+    participant HTML
+    participant CSS
+    participant JS
+    participant Fonts
+    participant Analytics
+
+    Browser->>HTML: 请求页面
+    HTML->>Browser: 返回HTML骨架
+    HTML->>CSS: 异步加载关键CSS
+    CSS->>Browser: 渲染首屏
+    HTML->>Fonts: preload关键字体
+    HTML->>JS: defer加载非关键JS
+    HTML->>Analytics: 异步加载统计脚本
+    JS->>Browser: 初始化交互功能
+    Analytics->>Browser: 开始数据收集
+```
+
+**实施配置：**
+```html
+<!-- 优化后的头部资源加载 -->
+<head>
+  <!-- 关键CSS内联 -->
+  <style>/* 首屏关键CSS */</style>
+
+  <!-- 字体预加载 -->
+  <link rel="preload" href="//fonts.googleapis.com/css?family=Source+Code+Pro" as="style" onload="this.onload=null;this.rel='stylesheet'">
+
+  <!-- 非关键CSS异步加载 -->
+  <link rel="preload" href="/css/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+</head>
+```
+
+### 4.4 按需加载机制
+```mermaid
+graph TD
+    A[页面加载] --> B{检测页面类型}
+    B --> C[文章页面]
+    B --> D[列表页面]
+    B --> E[归档页面]
+    C --> F{包含图片?}
+    F --> |是| G[加载fancybox]
+    F --> |否| H[跳过fancybox]
+    D --> I[仅加载基础功能]
+    E --> I
+    G --> J[减少70%无用加载]
+    H --> J
+    I --> J
+```
+
+**实现逻辑：**
+```javascript
+// 按需加载fancybox
+if (document.querySelector('.article-entry img')) {
+  // 动态加载fancybox资源
+  loadFancybox();
+}
+
+function loadFancybox() {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/css/fancybox.min.css';
+  document.head.appendChild(link);
+
+  const script = document.createElement('script');
+  script.src = '/js/fancybox.min.js';
+  script.onload = () => initFancybox();
+  document.body.appendChild(script);
+}
+```
+
+### 4.5 CDN与缓存策略
+```mermaid
+graph TB
+    A[用户请求] --> B{资源类型}
+    B --> C[静态资源]
+    B --> D[动态内容]
+    C --> E[CDN缓存]
+    C --> F[浏览器缓存]
+    D --> G[服务器渲染]
+    E --> H[就近访问]
+    F --> I[本地缓存]
+    G --> J[实时生成]
+    H --> K[快速响应]
+    I --> K
+    J --> K
+```
+
+**缓存配置建议：**
+```yaml
+# _config.yml 缓存配置
+cache:
+  enable: true
+  expires: 
+    css: 2592000  # 30天
+    js: 2592000   # 30天
+    images: 7776000  # 90天
+    fonts: 31536000  # 1年
+```
+
+## 5. 第三方服务优化
+
+### 5.1 LeanCloud统计优化
+```yaml
+# 当前配置（问题）
+leancloud_counter_security:
+  enable_sync: true  # 同步加载，阻塞渲染
+
+# 优化配置
+leancloud_counter_security:
+  enable_sync: false  # 异步加载
+  lazy_load: true     # 懒加载
+  timeout: 5000       # 超时设置
+```
+
+### 5.2 Google字体优化
+```html
+<!-- 当前方式（阻塞） -->
+<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
+
+<!-- 优化方式（非阻塞） -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preload" as="style" href="//fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" onload="this.onload=null;this.rel='stylesheet'">
+```
+
+## 6. 性能监控与度量
+
+### 6.1 关键性能指标
+| 指标 | 当前值 | 目标值 | 度量方法 |
+|------|--------|--------|----------|
+| FCP (First Contentful Paint) | 2-3s | <1.5s | Lighthouse |
+| LCP (Largest Contentful Paint) | 3-4s | <2.5s | Core Web Vitals |
+| CLS (Cumulative Layout Shift) | 0.2-0.3 | <0.1 | 页面稳定性 |
+| TTI (Time to Interactive) | 4-5s | <3s | 交互就绪时间 |
+| 资源总大小 | 200KB+ | <150KB | 网络面板 |
+
+### 6.2 性能测试流程
+```mermaid
+graph LR
+    A[本地测试] --> B[Lighthouse审计]
+    B --> C[PageSpeed Insights]
+    C --> D[WebPageTest]
+    D --> E[真实设备测试]
+    E --> F[性能报告]
+    F --> G{达标?}
+    G --> |否| H[继续优化]
+    G --> |是| I[部署上线]
+    H --> A
+```
+
+## 7. 实施计划
+
+### 7.1 优化阶段规划
+```mermaid
+gantt
+    title 资源加载优化实施计划
+    dateFormat  YYYY-MM-DD
+    section 第一阶段
+    资源去重清理    :done, phase1, 2024-01-01, 2d
+    配置文件整理    :done, after phase1, 1d
+    section 第二阶段  
+    安装压缩插件    :active, phase2, 2024-01-04, 1d
+    异步加载实现    :phase2-2, after phase2, 2d
+    section 第三阶段
+    按需加载开发    :phase3, after phase2-2, 3d
+    CDN配置        :phase3-2, after phase3, 1d
+    section 第四阶段
+    性能测试       :phase4, after phase3-2, 2d
+    优化调整       :phase4-2, after phase4, 2d
+```
+
+### 7.2 风险评估与回滚
+| 风险点 | 影响级别 | 应对策略 | 回滚方案 |
+|--------|----------|----------|----------|
+| 主题功能异常 | 高 | 充分测试 | Git回滚 |
+| 插件兼容性 | 中 | 版本锁定 | 插件降级 |
+| CDN服务异常 | 低 | 备用方案 | 本地资源 |
+| 统计功能失效 | 低 | 监控告警 | 配置还原 |
+
+## 8. 预期效果
+
+### 8.1 性能提升预期
+- **页面加载速度**: 提升50-70%
+- **首屏渲染时间**: 减少40-60%
+- **资源传输大小**: 减少30-50%
+- **用户体验评分**: 从60分提升至85分以上
+
+### 8.2 技术债务清理
+- 消除资源重复问题
+- 规范化配置文件
+- 建立性能监控机制
+- 优化构建流程
+
+### 8.3 可维护性改善
+- 清晰的资源组织结构
+- 自动化的压缩流程
+- 标准化的性能测试
+- 文档化的优化指南