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

Question

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

在某些条件下，看似随机的JavaScript函数和对象将是未定义的。由于这个原因，我们无法导航到某些路线。刷新浏览器可修复这些问题。

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

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

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

我无法在我的localhost上重现此行为。

在没有部署新代码的情况下，我将浏览器打开了一个周末并返回到正常运行的应用程序。

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

Answer 1

我已经通过向我的块文件添加contenthash解决了这个问题。

        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. Web应用程序将在浏览器中打开。
2. 我们会向服务器发布新代码。
3. 浏览器空闲。
4. 用户返回浏览器。
5. 浏览器从空闲状态唤醒并再次请求文件。
6. 使用asp-append-version="true"的那些更新，而具有静态名称的那些从缓存中获取。
7. 由于webpack捆绑文件的方式，对该缓存文件的任何微小更改都会抛弃应用程序。