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

Question

我们正在开发基于Vue CLI 3和Vue Router和Webpack的Vue.js应用程序。该航线是延迟加载和数据块文件名包含一个哈希清除缓存。总的来说，一切正常。

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

• 用户打开应用程序（假设路由为“ /”），从而加载了主块文件。
• 我们在应用程序中进行了一些更改，并部署了一个新版本。
  • 旧的块文件被删除
  • 正在添加新的块文件（即，块文件名中的哈希值已更改）
• 用户单击指向另一条路线的链接（例如“ / foo”）
  • 应用程序尝试加载已重命名的块文件时发生错误：（Error: "Loading CSS chunk foo failed. (/assets/css/foo.abc123.css)"这可能是CSS或JavaScript）

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

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

• 另一种（幼稚的）方法是在检测到此类错误后立即重新加载（例如，Vue Lazy Routes和加载块失败）。它虽然有些奏效，但会重新加载旧路径，而不是新路径。但是至少可以确保连续的路线更改再次起作用。

还有其他想法吗？也许webpack中可以解决此问题？

Answer 1

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

一旦 API 在部署过程中发生变化，您就会遇到问题。

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

然后你可以：

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

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