前端的缓存策略
前端资源也需要配置缓存策略,以提高网站的访问速度。由于网站的流量增大,我们需要合适的缓存策略才能让 CDN 发挥最大效果保证网站的访问速度。
# Cache-Control
Cache-Control 用来设置资源的缓存策略,常见的的值有:no-store 、no-cache、public、private、max-age、immutable。
# no-store
不缓存资源,每次都需要重新请求。
# no-cache
需要先验证资源是否过期,如果没有过期,可以使用缓存。
# public
资源可以被所有的用户缓存,包括 CDN。
# private
资源只能被用户缓存,不能被 CDN 缓存。
# max-age
设置资源的最大缓存时间,单位是秒。
# immutable
资源不会改变,可以永久缓存。
# 前端网站的缓存策略
现在的前端网站一般都是 SPA 或者 PWA,index.html 是一个入口文件,其他的资源都是通过 index.html 加载的。所以我们可以设置 index.html 的缓存策略为 no-store,保证每次都是最新的资源。
其他的都是静态资源,并且文件名包含 hash,所以我们可以设置这些资源的缓存策略为 immutable,保证这些资源不会改变,可以永久缓存。
Cache-Control: no-store
Cache-Control: public, max-age=604800, immutable
1
2
3
2
3
# 总结
index.html 文件是网站入口,这个文件不能缓存,每次都需要重新请求,否则不能及时更新网站。不过这个文件一般也不大,所以不会影响网站的访问速度。其他的静态资源文件名包含 hash,所以这些资源不会改变,可以永久缓存,这样可以提高网站的访问速度。
# 参考
MDN Cache-Control (opens new window)
Prevent unnecessary network requests with the HTTP Cache (opens new window)