通过延迟加载/代码拆分处理“加载块失败”错误

Question

我们正在使用Vue Router和Webpack开发基于Vue CLI 3的Vue.js应用程序。 routes are lazy-loaded和chunk file names contain a hash用于缓存清除。总的来说，一切正常。

但是，在部署过程中出现问题。重现步骤如下。

• 用户打开应用程序（假设路由为“ /”），因此将加载主块文件。
• 我们更改了应用程序中的某些内容并部署了新版本。
  • 已删除旧块文件
  • 正在添加新的块文件（即，块文件名中的哈希值已更改）
• 用户点击指向另一条路线的链接（例如“ / foo”）
  • 当应用程序尝试加载已重命名的块文件时发生错误：

    Error: "Loading CSS chunk foo failed.
    (/assets/css/foo.abc123.css)"

    （可能是CSS或JavaScript）

避免这种错误的最佳方法是什么？

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

• 另一种（幼稚的）方法是在检测到此类错误后立即重新加载（例如Vue Lazy Routes & loading chunk failed）。它多少有些用，但它会重新加载old路由，而不是new路由。但至少可以确保连续的路线更改再次起作用。

还有其他想法吗？也许webpack中有某些东西可以解决这个问题？

Answer 1

只要拥有API版本，就可以使用旧的应用程序文件（只需将它们留在服务器上，过几天便删除）。

在部署期间更改API后，您会遇到问题。

我想，您每次部署新的JS代码时都会部署一个新的API。

然后您可以：

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

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