关于设置缓存的问题
来源：6-6 基于webpack的持久化缓存【大型企业级应用的必会技能】
debug工程师
2020-09-24
您好，想问一道面试题。
在设置了强缓存和协商缓存之后，如果改变了一些依赖，比如 React 包换了个新版本，这时候应该怎么设置让用户更新？
我答的是 webpack 配置的 output chunkFileName 设置 contentHash，然后 html 不缓存就可以让用户下载最新依赖。
面试官说不对，说其实还是设置强缓存。
请问应该怎么解决这个问题？另外如果是多入口多个 html 文件应该怎么设置？
谢谢！！
1回答
-
同学你好！
第一次访问后为了达到下次访问提高速度，浏览器进行资源缓存。
强缓存是通过Expires和Cache-Control控制过期时间，过期前从缓存访问，过期后从服务器重新拿资源。
协商缓存是通过Last-Modified/IF-Modified-Since、Etag/IF-None-Match和服务器沟通，让服务器端告诉你是否需要更新资源，返回状态码304就是不需要更新。
html文件通常使用no-cache，即跟服务器revalidate。也可以设置no-store每次都强制拿最新，对于单页应用这个html入口文件本身是很小的，不是性能瓶颈。
回答第一个问题，面试官希望你回答协商缓存的工作原理，webpack解决的是文件打包，不涉及缓存的设置。你要讲讲Last-Modified/IF-Modified-Since，Etag/IF-None-Match的原理和使用方法，课里咱们用的nginx会默认配置协商缓存，但是你仍然要了解它是怎么工作的。你要谈的先不是js文件怎么打包，而是包含react的那个文件，应该怎么设置协商缓存，服务器端或者nginx代理上要怎么配置，才能保证用户再次访问时和服务器进行有效的沟通和验证，看是返回新react还是返回304。最后说webpack持久化缓存方案，配置contentHash的方法是通过控制文件名让缓存直接失效，没错。但是想一想，这里是不是没有任何的协商呀？所以抛开服务端设置来看，webpack持久化缓存是解决的强缓存的问题。
第二个问题，多个入口文件时，html仍然不需要缓存，要缓存的还是每个子app的js，css等，可以再加一个name变量，filename: "[name].[hash].js"。
112020-09-25
相似问题