解决浏览器缓存导致获取不到最新前端代码问题

工作时遇到的问题，简单记录一下

问题描述：

项目打包部署到nginx后，浏览器刷新，获取不到最新代码，禁用浏览器缓存后再刷新才能拿到最新代码

问题产生原因

缓存问题，代码更新后没有去拿最新的代码而是拿了缓存

解决方案

一般情况下，我们希望合理使用缓存，达到的效果是：代码更新，自动获取更新后的代码；代码没更新，则采用缓存
拿单页应用来举例，为了实现以上效果，我们采用的策略是：
1.对于js文件，其文件名应该跟随代码的变动而发生更改，例如将文件内容的hash作为文件名的一部分。这样代码更新后，文件名也会自动更改，index.html只要引入最新名字的js文件，就不会去拿代码更新前的js缓存
2.对于index.html文件，不缓存。之所以这样是因为index.html包含了对js文件的引用，如果将index.html缓存，缓存中index.html引用的js文件名还是老的，因此即使打包后js名字变了，但由于缓存中index.html引用的js名字没变，因此还是会拿到缓存的js代码。并且index.html一般很小，不缓存也没什么问题

以上两点在实现上
1.参考以下webpack配置，使得打包后的js文件名带上内容hash

output: {
  chunkFilename: "[name].[contenthash].js",
  filename: "[name].[contenthash].js"
}

2.更改nginx配置文件nginx.conf，使得index.html不使用缓存

location / {
    try_files $uri $uri/ /index.html;
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
}