静态资源的缓存标头

原文

• Your Cache Headers Could Probably be More Aggressive | Alex MacArthur

vercel.json

{
  "headers": [
    {
      "source": "/(.+\\.js|.+\\.css|.+\\.woff2)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31560000, immutable"
        }
      ]
    }
  ]
}

netlify.toml

[[headers]]
  for = "/*.(css|js|woff2)"
  [headers.values]
  Cache-Control = "public, max-age=31536000, immutable"

Cloudflare

- When incoming requests match: (http.request.uri.path ~ "\\.(css|js|woff2)$")
- Set static
- Header name: Cache-Control
- Value: public, max-age=31560000, immutable

Cloudflare Workers

import { Router, IRequest } from 'itty-router';

const router = Router();

router.get('/*.(css|js|woff2)', async (request: IRequest) => {
  const response = await fetch(request);

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: {
      ...response.headers,
      'cache-control': 'public, max-age=31560000, immutable',
    },
  });
});

export default {
  async fetch(request: Request, env: {}, context: ExecutionContext): Promise<Response> {
    context.passThroughOnException();

    return router.handle(request, env, context).then((response) => response);
  },
};