Files
2nd/10_Wiki/Topics/Backend/Case-Study-Skybound-Asset-Cache-Busting.md
T
Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00

4.0 KiB

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score verification_status tags raw_sources last_reinforced github_commit tech_stack
wiki-2026-0508-case-study-skybound-asset-cache- Case Study: Skybound Asset Cache Busting 10_Wiki/Topics verified self
Cache Busting
Asset Versioning Case Study
none B 0.85 applied
case-study
caching
deployment
web-performance
2026-05-10 pending
language framework
TypeScript Vite

Case Study: Skybound Asset Cache Busting

매 한 줄

"매 stale-asset bug 매 production". 매 Skybound (fictional internal codename) 매 CDN-cached JS bundle 매 user device 매 days-old version 의 root-cause hunt → 매 content-hash filename + immutable cache-control headers 의 conventional fix.

매 핵심

매 problem

  • 매 deploy → 매 some users 매 broken UI (stale app.js mismatched with new api.js schema).
  • 매 CDN-edge 매 7-day cache, browser 매 1-day cache, 매 union 매 race.

매 root cause

  • 매 fixed filename /static/app.js 매 invalidation 매 manual.
  • Cache-Control: max-age=86400 매 too aggressive for mutable name.

매 fix layers

  1. Content-hash in filename: app.[hash].js.
  2. Cache-Control: public, max-age=31536000, immutable for hashed assets.
  3. Short TTL on index.html (entry point) only.

💻 패턴

Vite hashed output (default)

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash][extname]',
      },
    },
  },
};

CDN cache-control (Cloudflare worker)

addEventListener('fetch', (e) => e.respondWith(handle(e.request)));
async function handle(req) {
  const url = new URL(req.url);
  const res = await fetch(req);
  const r = new Response(res.body, res);
  if (/\.[a-f0-9]{8,}\.(js|css|png|webp)$/.test(url.pathname)) {
    r.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
  } else if (url.pathname.endsWith('.html') || url.pathname === '/') {
    r.headers.set('Cache-Control', 'public, max-age=60, must-revalidate');
  }
  return r;
}

Service worker cache cleanup

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== CURRENT_VERSION).map(k => caches.delete(k)))
    )
  );
});

Deployment 매 atomic swap (S3 + CloudFront)

aws s3 sync ./dist s3://bucket --cache-control 'public,max-age=31536000,immutable' \
  --exclude 'index.html'
aws s3 cp ./dist/index.html s3://bucket/index.html \
  --cache-control 'public,max-age=60,must-revalidate'
aws cloudfront create-invalidation --distribution-id $ID --paths '/index.html' '/'

Verification 매 post-deploy

curl -I https://app.example.com/assets/app.abc123.js | grep -i cache-control
# expect: cache-control: public, max-age=31536000, immutable

매 결정 기준

Asset type Strategy
Hashed JS/CSS/images immutable, max-age=1y
HTML entry max-age=60, must-revalidate
API JSON no-store or stale-while-revalidate

기본값: Vite/Webpack hashed output + 1y immutable for hashed, short TTL for HTML.

🔗 Graph

🤖 LLM 활용

언제: deploy-time stale-asset bug, CDN config debugging. 언제 X: server-rendered no-cache responses (caching irrelevant).

안티패턴

  • Fixed filenames + long cache: 매 production-broken-on-deploy guarantee.
  • Cache-busting via querystring ?v=2: 매 some CDNs ignore query.
  • Forgetting HTML cache TTL: hashed assets 매 useless if entry HTML cached.

🧪 검증 / 중복

  • Verified (MDN Cache-Control, Vite docs, Web.dev caching guide).
  • 신뢰도 B+.

🕓 Changelog

날짜 변경
2026-05-08 Phase 1
2026-05-10 Manual cleanup — Skybound case study FULL with Vite + CDN patterns