博客重构与优化记录
博客重构与优化记录
最近把博客整个换血了一遍：从 Hexo + Butterfly 迁移到 Firefly / Astro 新站，随后完成了一轮系统性性能优化，并把部署链路全面自动化。这篇文章记录整个过程、数据和踩过的坑。
1. 新站：Firefly / Astro
新站基于 Firefly（Astro 6 + Svelte 5）主题，在原有功能上扩展了玻璃卡片壁纸模式、樱花/涟漪特效、作品集页、音乐播放器等。跟旧站最大的区别：
- 全静态生成，页面加载极轻
- 配置驱动，
src/config/下统一管理所有功能开关 - Swup 实现 SPA 式页面切换，导航零刷新
2. 性能优化清单
上线前的体检发现了几处**“首屏浪费”**，逐一处理：
① Swup 重复预取当前页（每次多花 ~98KB）
官方 preload 插件每次加载都会重复请求当前页 HTML（纯浪费）。处理方式：关掉官方内置预取，换成自研的轻量懒预取——只预取导航栏里的站内链接、排除当前页、浏览器空闲时执行。
后来线上实测又发现：导航链接在 DOM 里出现两次（桌面导航栏 + 移动菜单），导致同一批页面被并发预取两遍（10 个请求）。加了个 URL 去重集合，预取请求从 10 → 5，每次访问省约 325KB 传输。
② Live2D 看板娘延迟加载（首屏省 858KB）
看板娘引擎 + 模型（纹里 503KB、moc 185KB、引擎 160KB）原来首屏无条件加载。改为用户首次交互后（鼠标移动/点击/滚动）才动态加载，爬虫和纯浏览场景完全不再下载。
③ 图床大图本地化（壁纸 152KB → 84KB）
原来壁纸和头像走第三方图床（pic.imgdb.cn），那张 1920px 的 JPEG 实测拖慢 load 事件 1.6 秒——图床不可控且是首屏瓶颈。下载转成 WebP 放本地：
- 壁纸：
banner.webp，152KB → 84KB（-45%） - 头像：
avatar.webp，10KB
④ iconify 图标本地化（外部请求清零）
看板娘菜单图标原来运行时从 api.iconify.design 拉取（每次 5 个外部请求）。5 个图标 SVG 本地化 + 拦截 iconify API 重定向到本地，第三方请求只剩下网易云音乐 API（音乐功能必需）。
附带优化：樱花特效后台标签页自动暂停渲染；图标库改为按注册表按需打包（dev 内存降 ~400MB）。
3. 部署到 Vercel
部署选型经历了两个阶段：
CLI 部署 → Git 集成自动部署
一开始用 vercel --prod 手动上传部署。实测发现两点：
- CLI 部署走“上传模式”——本地文件打包上传（14.9MB），每次都要占本地网络和内存
- Git 集成的部署更快更省——push 后 Vercel 直接从 GitHub 克隆、云端构建（25s 就 Ready）
改成了 vercel git connect 连接 GitHub 仓库，之后的完整工作流：
git push → GitHub Actions（biome + astro check/build）→ Vercel 云端构建 → 自动上线域名 blog.morphofly.xyz 也从旧项目迁移到新站（DNS CNAME 早就指向 Vercel，切换秒级生效，旧 Hexo 站已退役）。
4. CI/CD 自动化修复
顺手把 GitHub Actions 也修好了——之前三个工作流全部监听 master 分支，而仓库主分支是 main，CI 从来没运行过：
- 触发分支
master → main - 修掉 biome 首次跑出的 7 个存量 lint 问题（import 排序、格式、forEach 回调）
- 现在每次 push：Code quality（biome）17s 通过、Build and Check（Node 22/23 双版本 × astro check/build）1m25s 全绿
5. 生产环境安全检查
给线上站补上了 Vercel Production Checklist 的缺口：
- Content-Security-Policy：
default-src 'self'、object-src 'none'、frame-ancestors 'none'，放行 https 外链资源（文章 iframe、音乐 API 等） - Permissions-Policy：禁用摄像头/麦克风/定位/支付等敏感 API
- 缓存策略：
/_astro/*与静态资源max-age=31536000, immutable，HTMLmust-revalidate - 自定义 404 页面、HSTS、X-Frame-Options 等
CSP 上线后特意用真实浏览器测了一轮：首页渲染、Swup 页面切换全部正常，Console 零报错零 CSP violation。
6. 实测数据
冷加载（浏览器禁用缓存 + 清空，连测 3 次，真实首访场景）：
| 指标 | 数据 |
|---|---|
| TTFB | 55 ~ 123ms |
| LCP | 496 ~ 812ms |
| CLS | 0.00 |
| Load | 807 ~ 1115ms |
| 每次传输 | ~665KB / 47 个请求 |
Lighthouse（desktop）：Accessibility 97 · Best Practices 100 · SEO 100。
对比优化前：第三方请求 11 个（~169KB）→ 1 个；看板娘首屏 858KB → 0；壁纸 1.6s 拖累 → 84KB 本地秒开。
7. 一个插曲：核弹级 OOM
手动 CLI 部署时机器两次 OOM（内核杀进程）——排查后发现是 Node 26 + Vercel CLI 上传时的内存膨胀（被杀的进程匿名内存 6.59.9GB、虚地址 4347GB），叠加之前测试残留的浏览器/MCP 进程，15GB 内存被瞬间打爆。
结论：手动 vercel --prod 是“易燃”路径。切换到 Git 集成后构建全程在 Vercel 云端跑，本地只推代码，再也不用担心 OOM。
8. 现在的工作流
日常就是：
git add -A && git commit -m "feat: ..." && git push剩下全自动：CI 检查 → Vercel 构建 → blog.morphofly.xyz 上线，全链路 1~2 分钟，本地零开销。
技术总结：性能优化不是玄学，是把每个“无谓的请求”消灭掉——首屏只留真正必要的东西，其余的延迟加载或本地化。愿这份记录对同样在折腾博客的人有帮助。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
音乐
暂未播放