老师你好，有个面试题想请教

Question

原题目是这样的，面试官问前端性能优化你都做过哪些？完了说着说着我就说到webpack打包这里了，然后提到了webpack打包后产生的文件唯一标识contentHash会命中浏览器的协商缓存，减少http请求。面试官就问我这个哈希值为什么会命中协商缓存？我就答浏览器会检查是否携带Etag这个Header，Etag可以是一个文件的唯一标识，而webpack打包后产生的哈希值就对应了这个标识，所以会命中协商缓存（基本上就围绕协商缓存那一套在说）。但是面试官貌似不太满意。我该怎么答呢，或者说我是不是对于webpack打包和缓存的关系理解有误？

Answer 1

双越 2021-05-08 18:52:40

contentHash 并不是协商缓存，而是强缓存，nginx 会设置如：

Cache-Control: max-age=31536000

只要 js （或者 css img 等静态文件）文件内容发生变化，contentHash 肯定会变，而且 html 内的 js 地址也会随着变。所以，每次生成的 js 都用强缓存即可。

• 提问者 Darkholme #1

  所以答错了，应该说contentHash命中的是强缓存是嘛。那答案本身的出发点有错吗，contentHash命中了缓存，减少http请求，提高用户体验。

• 双越 回复 提问者 Darkholme #2

  是的。http 缓存还是挺重要的，面试经常考察。如果这块不了解的话，可以看看这门课程 https://coding.imooc.com/class/chapter/400.html#Anchor ，第14章 ，讲的很详细。

• zhzz #3

  哇，我一直以为加个 hash 是走的协商缓存，原来这个 hash 控制的是内部文件请求 js 的地址变化。👍

点开查看后面2条评论

Answer 2

美丽life 2022-06-20 09:08:51

老哥这是在一本正经的瞎扯啊。。。webpack 打包是在前端，后端产生的 etag 怎么回知道呢。。。