javascript - Chrome 没有加载所有 webpack JS 源文件，但是 Firefox + Chrome Incognito 可以

Question

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

高级问题是，当我们重新部署到我们的开发环境时，该应用程序仅在 Chrome 隐身模式或 Firefox 中加载。

该应用不会在普通 Chrome 中加载 - 而是返回空白页面。

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

我们注意到的一件事是，在隐身模式下加载的文件 login.js 不会在非隐身模式下加载。

.

非隐身模式

非隐身源文件

(这里我们可以看到 login.js 以及 img 文件夹加载失败)

.

隐身模式

隐身源文件

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

我们也在控制台中看到了这一点:

因此似乎没有加载某些东西，或者正在缓存(因此没有加载最新/正确的版本)。

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

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

.

编辑:我还在非隐身模式下禁用了所有 Chrome 扩展，但无济于事。我们团队的另一位开发人员证实了这个问题，但是，第二位开发人员在 Chrome 中根本没有这个问题。

要重现该问题，您不能只访问该网站一次。事实上，你需要访问它一次，然后必须部署一个新版本，然后重新加载页面时，它会加载失败。

.

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

Answer 1

我相信我们找到了答案。

清除存储 影响 3 件事。

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

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

我们从在我们的应用程序代码中使用 localStorage(持久)切换到使用 sessionStorage(临时)。

这似乎解决了问题。