Image Cache（图片缓存）测试
🖼️ Next.js 图片缓存机制
Next.js 的 Image 组件提供了强大的图片优化和缓存功能：
- 自动优化：自动转换为 WebP 等现代格式，压缩图片大小
- 响应式加载：根据设备大小加载合适尺寸的图片
- 懒加载：默认启用懒加载，只在需要时加载图片
- 缓存优化：优化后的图片会被缓存在服务器端（生产环境）
📅 页面渲染时间：2025-12-17T09:54:09.448Z
📦 测试 1：本地静态图片（构建时优化）
本地图片在构建时会被自动优化和缓存，生成多个不同尺寸的版本。
原始图片：next.svg（使用 img 标签）
❌ 无优化、无缓存、无响应式
优化图片：next.svg（使用 Image 组件）
✅ 自动优化、缓存、响应式
🌐 测试 2：远程图片 - Priority（立即加载）
使用 priority 属性的图片会立即加载，不使用懒加载。适用于 LCP 图片。
✅ 预期行为：
- 图片立即加载，不等待滚动到视口
- 第一次访问：从远程服务器下载并优化
- 再次访问：从 Next.js 缓存中加载（检查 Network 面板的 304 状态码或 disk cache）
- 自动转换为 WebP 格式（如果浏览器支持）
🔄 测试 3：远程图片 - Lazy Loading（懒加载）
默认情况下，Image 组件使用懒加载，只在图片进入视口时才加载。
懒加载图片 #1（滚动到这里才会加载）
懒加载图片 #2（滚动到这里才会加载）
懒加载图片 #3（滚动到这里才会加载）
🔄 预期行为：
- 图片只在滚动到视口时才加载（打开 Network 面板观察）
- 减少初始页面加载时间
- 节省带宽（未滚动到的图片不会加载）
🔴 测试 4：动态图片（每次不同）
使用时间戳作为 seed，每次刷新页面都会显示不同的图片。
当前时间戳：1765965249448
🔴 预期行为：
- 每次刷新页面都会显示不同的图片
- 即使使用 Image 组件，也会重新下载（URL 不同）
- 适用于需要动态更新的图片场景
📱 测试 5：响应式图片（不同设备尺寸）
Next.js 自动生成多个尺寸的图片，根据设备大小加载合适的版本。
小尺寸 (300x200)
中尺寸 (600x400)
大尺寸 (1200x800)
📱 预期行为：
- Next.js 生成多个尺寸：640w, 750w, 828w, 1080w, 1200w, 1920w, 2048w, 3840w
- 浏览器根据设备宽度和像素密度选择合适的尺寸
- 移动设备加载小图，桌面设备加载大图（节省带宽和提升性能）
🧪 如何验证图片缓存？
- 打开浏览器开发者工具
打开 Network 面板，过滤 "Img" 类型
- 首次加载
观察图片请求，应该看到状态码 200（从服务器下载）
- 刷新页面
再次观察图片请求，应该看到：
• 状态码 304（Not Modified，使用浏览器缓存）
• 或显示 "disk cache"（从磁盘缓存加载）
• Size 显示 "from disk cache" 或很小的字节数 - 查看图片优化
点击 Network 中的图片请求，查看 Response Headers：
• Content-Type: image/webp（自动转换为 WebP）
• Cache-Control: public, max-age=60, must-revalidate（缓存 60 秒） - 生产环境测试
pnpm build && pnpm start在生产环境中，图片优化会缓存到
.next/cache/images目录
⚙️ 技术细节
📊 图片缓存位置
- 开发环境：不缓存优化后的图片（每次都重新优化）
- 生产环境：
.next/cache/images目录 - 浏览器缓存：根据 Cache-Control 响应头 （默认 60 秒）
🔧 自定义缓存配置
// next.config.js
module.exports = {
images: {
minimumCacheTTL: 60, // 缓存时间（秒）
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
formats: ['image/webp'], // 优化格式
remotePatterns: [ // 允许的远程图片域名
{
protocol: 'https',
hostname: 'picsum.photos',
},
],
},
};💡 最佳实践
- LCP 图片使用
priority属性 - 首屏以下的图片使用懒加载（默认）
- 始终指定
width和height防止布局偏移 - 本地图片优先（构建时优化，更快）
- 远程图片在
next.config.js中配置域名