Chrome不会加载所有webpack JS源文件，但Firefox + Chrome Incognito可以

Question

通过Heroku提供的Vue.js应用程序遇到了最近的部署问题。

高级问题是，当我们重新部署到Dev环境时，该应用程序仅以Chrome Incognito模式或Firefox加载。

该应用不会在正常的Chrome浏览器中不加载，而是返回空白页面。

我们担心，当我们从Dev-> Staging-> Prod升级时，用户也会遇到此缓存问题，并且该应用不会为他们加载。

我们注意到的一件事是，以隐身模式加载的文件login.js并未以非隐身模式加载。

。

非隐身模式

非隐身源文件

（这里我们看到login.js以及img文件夹都无法加载）

。

隐身模式

隐身源文件

我们注意到的另一件事是bootstrap似乎正在隐身模式下发起此调用，但是在非隐身模式下我们看不到此请求。也许引导程序无法加载？

我们还在控制台中看到了这一点：

因此，似乎没有加载或正在缓存某些内容（因此未加载最新/正确的版本）。

即使我们以非隐身模式激活Chrome开发工具中的“禁用缓存”，也会遇到此问题。

我们不确定这是缓存问题，webpack问题还是Chrome问题。有谁知道为什么这些源文件可能无法以非认知模式加载？

。

编辑：我也禁用了所有非隐身模式下的Chrome扩展程序，但均无济于事。我们团队中的另一位开发人员最终确认了该问题，但是第二位开发人员在Chrome中根本没有问题。

要复制该问题，您不能仅访问网站一次。实际上，您需要访问它一次，然后必须部署一个新版本，然后在重新加载页面时，它将无法加载。

。

编辑2 ：我注意到的另一件事是正确的版本隐身加载了两个login.js和login.css。非隐身版本无法调用第二个版本。我想知道是否以某种方式缓存了名称冲突？

Answer 1

我相信我们已经找到答案了。

Clear storage影响三件事。

1. 服务人员
2. 存储
3. 缓存

我们非常确定这不是缓存问题，因为我们在Chrome开发工具中添加了Content: no-cache和Disable cache。此外，我们不为该应用程序使用任何Service Worker。

我们从在应用程序代码中使用localStorage（永久）切换为使用sessionStorage（临时）。

这似乎解决了问题。