Next.js 15 Save-Data 网络节省与资源降级治理实践

核心价值尊重用户的节省数据偏好，降低图片质量、跳过非必要预连接与动画以减少流量与延迟。设置 `Vary: Save-Data` 与合理缓存头，确保 CDN 与客户端缓存一致性。Route Handler 实现export const runtime = 'edge' export async function GET(req: Request) { const save = (req.headers.get('save-data') || '').toLowerCase() === 'on' const q = save ? 60 : 85 const w = save ? 640 : 1280 const url = `https://cdn.example.com/hero.avif?w=${w}&q=${q}` const res = await fetch(url) return new Response(res.body, { headers: { 'Content-Type': res.headers.get('content-type') || 'image/avif', 'Vary': 'Save-Data', 'Cache-Control': 'public, max-age=600, s-maxage=3600', }, }) } 应用层协同`matchMedia('(prefers-reduced-motion: reduce)')` 可与 `Save-Data` 同时启用动效降级。对非关键第三方域跳过 `preconnect`，降低握手开销。结论利用 `Save-Data` 进行资源质量与尺寸的动态治理，配合正确缓存头可在保持核心体验的同时显著降低网络成本。