通过延迟加载/代码拆分

Question

我们正在开发基于Vue CLI 3和Vue Router和Webpack的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不会为该保存按钮更改）。 / li>

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

Answer 2

请勿缓存条目文件（通常为index.html）。 我们添加：

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

在我们的Nginx服务器配置中。

然后，刷新客户端代码后，您可以使用vue-router的错误钩子来检测错误并正确执行某些操作。