Javascript “处理”；“加载区块失败”；延迟加载/代码拆分错误

我们正在开发一个基于Vue CLI 3的Vue.js应用程序，其中包含Vue路由器和网页包。用于破坏缓存的和。总的来说，一切正常

但是，在部署过程中存在一个问题。复制的步骤如下

• 用户打开应用程序（假设路由“/”），从而加载主块文件
• 我们在应用程序中更改了一些内容，并部署了一个新版本。
  • 旧块文件将被删除
  • 正在添加新的区块文件（即区块文件名中的哈希值更改）
• 用户单击指向其他路由的链接（例如“/foo”）
  • 应用程序尝试加载已重命名的区块文件时出错：

    error:“加载CSS区块foo失败。”。
    （/assets/css/foo.abc123.css）“

    （这可能是css或JavaScript）

避免此类错误的最佳方法是什么？

• 一种可行的方法是保留旧块文件，然后在以后删除它们。但是，这会使新版本的部署变得复杂，因为您需要跟踪旧版本，并始终使用新版本部署旧块文件

• 另一种（幼稚的）方法是在检测到此类错误后立即重新加载（例如）。它在某种程度上起作用，但它会重新加载旧路线，而不是新路线。但至少它可以确保连续的路线更改再次起作用

---

还有其他想法吗？也许网页包中有什么东西可以解决这个问题？

只要你有一个版本化的API，你就可以使用旧的应用程序文件（只需将它们留在服务器上，几天后删除即可）

在部署过程中，只要API发生更改，您就会遇到问题

我假设，每次部署新的JS代码时都会部署一个新的API

然后你可以：

• 将API版本（只需使用git哈希）作为每个响应（JS资源、CSS、API请求、404响应）的头传递给应用程序
• 将API版本存储在主JS入口点中（或以某种方式使其可访问，例如作为生成的常量）
• 在每个服务器响应上，检查服务器版本是否与主客户端版本匹配
• 如果没有：向用户显示一个突出的警告（如cookie横幅），提示用户应该重新加载页面（=>允许用户保存技术，希望API没有为该保存按钮更改）

对于异步组件，如果加载失败，我们将显示正常的“未找到”消息，并显示一个重新加载按钮，而不是组件。在没有用户交互的情况下重新加载会导致很多混乱。

不要缓存条目文件（通常是index.html）。 我们补充说：

在我们的nginx服务器配置中

---

然后，在刷新客户端代码后，您可以使用vue路由器的错误挂钩检测错误并正确执行操作。

热重新加载（webpack）不应该完全按照您的要求执行吗？@bigless在开发过程中是的，但在生产过程中不是。在生产过程中动态哈希链接又称块不是一个好主意。它应该是查询参数或锚点的形式，但不是在文件名中抛出404..@bigless哈希的链接显然有其问题，但据我所知，这是行业标准（例如）。查询参数在几年前还不能很好地工作（例如，由于代理），但它们可能在今天工作。我在这方面找不到确切的资料。但是锚定肯定不起作用。我们在生产中使用查询版本控制已经多年了，而且很有效。我们在包构建时将版本（f.e.？v=1.66.5）生成到模板中，并将其作为页面上每个本地资源的后缀。

expires 0;
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate';