perf/cache-static-assets

Dlaczego

Without long cache lifetimes, returning visitors download the same scripts, styles, fonts and images again. With long lifetimes on HTML or on files whose names do not change, visitors keep seeing an old version after a deploy.

Poprawka

Let the build add a content hash to file names (Vite, webpack and the frameworks do it by default) and serve those with Cache-Control: public, max-age=31536000, immutable. Serve HTML with Cache-Control: no-cache so it is revalidated each time. Configure it in the host's headers file (_headers, vercel.json, netlify.toml, server config).

Przykłady

# _headers (Netlify, Cloudflare Pages)
/assets/*
  Cache-Control: public, max-age=31536000, immutable
/*.html
  Cache-Control: no-cache

Źródła

• web.dev, Prevent unnecessary network requests with the HTTP Cache
• MDN, Cache-Control
• Chrome for Developers, Use efficient cache lifetimes insight

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain perf/cache-static-assets