如何制定前端资源的最佳缓存策略？
如何制定前端资源的最佳缓存策略？什么意思？
前端有很多类型的资源 比如：.js .css .png index.html
不同资源，缓存时间的策略应该有所不同
- 比如图片，一般不会变更，缓存时间可以在一年以上（如何设置缓存请参考姊妹篇 浏览器缓存的起点 -> Cache-Control）
如何制定最佳缓存策略
最好的标准是根据资源更改的频率制定
| Html | Css 和 js | 图片 | |
|---|---|---|---|
| 频率 | 可能会频繁更改，需要每次都询问。 | 可能每月修改 | 几乎不变 |
| Cache-Control | private, no-cache | Public, max-age=2592000 (一个月) | Public, max-age=31536000 (一年)，stale-while-revalidate=86400 |
| 使缓存失效 | 每次都要询问，确保最新 | 自动过期或改名字（hash值） | 自动过期或改名字（hash值） |
现代工程化架构下的最佳缓存策略有所不同
背景： 任何一个css或js文件，只要有变更，通过webpack或其他打包工具，自动改变文件的名（hash值）
此工程下的最佳缓存策略可以设置为：
| Html | Css 和 js | 图片 | |
|---|---|---|---|
| 频率 | 可能会频繁更改，需要每次都询问。 | 可能每月修改 | 几乎不变 |
| Cache-Control | private, no-cache | Public, max-age=31536000 (一年甚至永久) | Public, max-age=31536000 (一年甚至永久)，stale-while-revalidate=86400 |
| 使缓存失效 | 每次都要询问，确保最新 | 改名字（hash值） | 改名字（hash值） |
具体操作
更改nginx配置，设置响应头，Cache-Control：max-age：xx
- 公司内的话，可以让运维改，告诉运维哪些类型的资源 对应哪些缓存策略
码字不易，点赞鼓励
性能优化合集快速入口：
