前端项目index.html缓存问题

问题描述

当前端项目发版后总会遇到不会加载最新代码问题，打包的js是会带有contenthash的，所以正常来说是一定会加载最新的js。

原因

后排查发现是由于index.html导致的，在输入栏输入地址或者关闭后打开浏览器加载的index.html还是之前的index.html，导致无法加载到最新的js文件。

解决办法

在nginx中配置index.html不缓存

location / {
    if ($uri = '/index.html'){
       add_header Cache-control 'no-store';
    }
}

错误配置

网上也看到一些其他配置，验证无效，在这里也贴出来

配置1

这个会导致每次刷新js也不走缓存

location / {
     add_header Cache-control 'no-store'
}

配置2

未亲验。同事验证后说也是无效的，打开新窗口是会重新加载js文件

location = /index.html {
     add_header Cache-control 'no-store'
}

总结

nginx的一些配置前端还是有必要了解的，以后要深入了解下。