重新部署Web应用程序导致看似随机的JavaScript函数和对象未定义

Question

我们有一个.NET MVC应用程序提供的Aurelia SPA。 SPA是使用Webpack捆绑的。

在某些情况下，看似随机的JavaScript函数和对象将无法定义。因此，我们无法导航到某些路线。刷新浏览器可以解决这些问题。

我们发现重现此行为的步骤并不总是可靠的。

1. SPA在浏览器中打开（在本例中为Chrome）。
2. 我们将新版本的代码部署到我们的服务器上； .NET和JavaScript。
3. 以前打开的浏览器保持打开状态约12小时

然后，我们将看到类似Cannot read property 'split' of undefined的问题。导航到某些路线时。阻止路线导航的未定义对象并不总是相同。

我无法在本地主机上重现此行为。

在不部署新代码的情况下，我在周末打开浏览器，然后返回运行正常的应用程序。

任何建议将不胜感激。我不确定部署之间的关系，因为浏览器应该不知道任何服务器更改。

Answer 1

我通过在我的块文件中添加一个内容哈希来解决此问题。

        path: path.resolve(bundleOutputDir),
        publicPath: "dist/",
        filename: "[name].js",
        chunkFilename: "[name].[contenthash].js",
      },

我们的webpack构建输出了几个文件。其中大多数是在启动时必需的，并包含在我们的MVC应用的主控制器的index.cshtml中。

例如<script type="text/javascript" src="~/dist/app.js" asp-append-version="true"></script>

asp-append-version="true"向这些文件添加版本，以便浏览器知道是否应从缓存中加载它们。

问题是webpack输出的其他块文件没有以这种方式引用。它们是从index.cshtml引用的文件中引用的。

这是我所相信的。

1. 该网络应用将在浏览器中打开。
2. 我们会将新代码发布到服务器。
3. 浏览器处于空闲状态。
4. 用户返回浏览器。
5. 浏览器从空闲状态中唤醒，然后再次请求文件。
6. 具有asp-append-version="true"的那些被更新，而具有静态名称的那些被从缓存中获取。
7. 由于webpack捆绑文件的方式，对该缓存文件进行的任何细微更改都会使应用程序退出。