Vite + Vue 中动态导入的正确使用方法

Question

我们有一个应用程序，我们在路由定义中使用动态导入语法，如下所示：

  ...
  component: () => import('./components/SomeComponent'),

我们最近过渡到了 vite，自从切换以来，TypeError: Failed to fetch dynamically imported module每当我们部署新版本的应用程序时，我们都会捕捉到这一点。

根据这篇 SO post，发生这种情况是因为文件的哈希在新部署中无效，但是当我们完全交付新版本时，为什么这些文件仍然被以前的哈希引用？

我还发现了一个遇到相同错误的上一个问题，并在其线程中找到了这个链接，该链接讨论了 rollup 如何期望动态导入的特定语法：

// current
component: () => import('./components/SomeComponent')

// expected?
component: () => import('./components/SomeComponent.vue')

这可能就是我们收到该Failed to fetch dynamically...错误的原因吗？因为我的动态导入缺少文件扩展名？我有点困惑，因为即使没有文件扩展名，动态导入似乎仍然可以工作，只是我们在新部署上发现了错误。

Answer 1

但是，当我们完全交付新版本时，为什么仍然使用以前的哈希值引用这些文件？

动态模块的要点是并非所有代码都加载到浏览器中。让我们考虑以下情况，您有一个带有 1 个动态模块的网站，通过单击按钮即可加载该模块。

当你构建它时，你的文件应该如下所示：

index.html
assets/
-- index-abc123.js
-- dynamicModule-aaa111.js

因此，当用户打开您的网站时，他应该得到以下信息

index.html
assets/
-- index-abc123.js

并不是说用户还没有加载动态模块。

现在您将进行部署，并对 DynamicModule 文件进行轻微更改，您的文件名将更改为：

index.html
assets/
-- index-xxx345.js
-- dynamicModule-bbb222.js

现在，没有刷新浏览器的用户将单击应该导入动态模块的按钮。将会发生的情况是，他的浏览器将尝试下载“dynamicModule-aaa111.js”，但该文件不再存在，并被“dynamicModule-bbb222.js”取代。现在您将收到错误（无法获取动态导入的模块）