修复老项目 SPA 里微妙的缓存错配:Forem 一次务实的边缘缓存部署
来源:dev.to — 2026-09-01
📋 概述
DEV(基于开源 Forem)采用 Rails 服务端渲染、Fastly 边缘缓存加 InstantClick 轻量客户端导航的混合架构,页面切换能压到 100ms 以内,但局部页面替换叠加激进的边缘缓存,制造了棘手的部署难题。当发布新 CSS 时 Rails 生成新的资源摘要哈希,而许多文章片段在部署前就被 Fastly 缓存、仍引用旧版本样式。作者原本靠客户端脚本比对样式路径并动态替换 link 标签,结果触发被动的 DOM 降级、旧资源 404 和 CSS 级联竞态。最终他们不再当 DOM 变更问题处理,而是把它当作缓存分区问题:用核心样式摘要的 10 位指纹作为查询参数追加到内部导航 URL,让 Fastly 按指纹天然分区缓存。
🔑 核心要点
- Rails 服务端渲染加 Fastly 边缘缓存与 InstantClick 局部替换,带来亚百毫秒的切换
- 部署新 CSS 后,早前缓存的文章片段仍引用旧版样式,造成缓存错配
- 客户端动态换 link 标签的方案脆弱:会触发 DOM 降级、404 与 FOUC
- 正确思路是缓存分区:用样式摘要指纹作为查询参数,让 Fastly 按指纹分区
- 内部导航把指纹追加到 URL,指纹缺失时优雅回退到旧的 ?i=i
💡 金句
成熟的工程里,最关键的往往不是漂亮的新功能,而是在多年积累的代码与生产决策上做修补。
👍 0
👎 0
← 返回 dev.to 首页