面试题：Next.js结合CDN时的缓存策略与优化

Question

当在Next.js项目中使用CDN加速静态资源加载后，如何制定合理的缓存策略以提升性能？请详细说明不同类型静态资源（如CSS、JS、图片）的缓存设置方法及原因，以及如何处理缓存更新问题。

Answer 1

不同类型静态资源缓存设置方法及原因

1. CSS
   • 设置方法：设置较长的缓存时间，例如一年（31536000秒）。在CDN配置中，针对CSS文件设置Cache - Control头为max - age = 31536000, public。
   • 原因：CSS文件相对稳定，内容更新频率较低。较长的缓存时间可以确保用户在多次访问时，浏览器直接从本地缓存加载CSS，减少重复请求，提升页面加载速度。同时设置public，表示可以被任何缓存（包括中间代理和浏览器）缓存。
2. JS
   • 设置方法：同样设置较长缓存时间，如一年（31536000秒），Cache - Control头设置为max - age = 31536000, public。对于一些包含业务逻辑且不常变动的核心JS文件，这一设置尤为合适。对于频繁更新的JS模块，可以通过版本号（如文件名添加哈希值）结合较短缓存时间（如一周，604800秒），Cache - Control头设置为max - age = 604800, public。
   • 原因：大部分JS文件业务逻辑相对稳定，长时间缓存可提高加载效率。但对于部分可能频繁更新的模块，设置较短缓存时间，结合版本号可确保用户获取最新代码。哈希值版本号可让浏览器区分新旧文件，避免旧缓存影响。
3. 图片
   • 设置方法：对于普通图片，设置缓存时间为几个月（如3个月，7889232秒），Cache - Control头设置为max - age = 7889232, public。对于极少变动的图标等图片，可设置更长缓存时间，如一年。对于用户上传的图片，设置较短缓存时间（如一天，86400秒），Cache - Control头设置为max - age = 86400, public。
   • 原因：普通图片更新频率不高，较长缓存可提升加载性能。极少变动的图标等更可长时间缓存。而用户上传图片可能存在随时修改的情况，较短缓存确保用户能及时看到更新。

处理缓存更新问题

1. 版本控制
   • 对于CSS、JS文件，在构建过程中，给文件名添加哈希值。例如，main.js变为main.[hash].js。当文件内容改变时，哈希值也会改变，CDN和浏览器会将其视为新文件，重新请求。
   • 对于图片，如果是可预见的更新（如品牌图标更新），可在文件名中添加版本号或时间戳，如logo_v2.png或logo_20240101.png。
2. Cache - Control头动态调整
   • 在服务端代码中，根据业务逻辑动态调整Cache - Control头。例如，当检测到某个图片被用户更新后，下次请求该图片时，设置较短的缓存时间。
3. CDN刷新
   • 利用CDN提供的刷新功能，当有重要资源更新时，手动在CDN控制台刷新对应文件的缓存，强制CDN重新获取最新文件，并向用户提供。