preload 动态组件 异常处理

[zezhongmiao]

Describe the bug

return Promise.all( deps.map((dep) => { // @ts-ignore if (dep in seen) return // @ts-ignore seen[dep] = true const isCss = dep.endsWith('.css') const cssSelector = isCss ? '[rel="stylesheet"]' : '' // @ts-ignore check if the file is already preloaded by SSR markup if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) { return } // @ts-ignore const link = document.createElement('link') // @ts-ignore link.rel = isCss ? 'stylesheet' : scriptRel if (!isCss) { link.as = 'script' link.crossOrigin = '' } link.href = dep // @ts-ignore document.head.appendChild(link) if (isCss) { return new Promise((res, rej) => { link.addEventListener('load', res) link.addEventListener('error', rej) }) } }) ).then(() => baseModule())

异常处理 seen[dep] = true 至少放在后面

Reproduction

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

Used package manager:

Logs

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[Shinigami92]

Please rework the issue description and add a reproduction link, otherwise this issue will be just closed soon

[zezhongmiao]

Please rework the issue description and add a reproduction link, otherwise this issue will be just closed soon

vite/packages/vite/src/node/plugins/importAnalysisBuild.ts

line 27
conside exception while load component

[Shinigami92]

Okay it seems you have hard problems to communicate in english
Please feel free to write in chinese and we use e.g. google translator on our side 🙂

auto translated:
嗯，看来你用英语交流有困难
请随意用中文写，我们使用例如谷歌翻译在我们身边🙂

[zezhongmiao]

~~！ 问题是 模拟断网情况下 再次加载 貌似不加载了 。。。 使用谷歌浏览器 offline 点击一次 在恢复网络。 使用情景是 vue-router component: () => import(xxxxx)

[zezhongmiao]

Okay it seems you have hard problems to communicate in english
Please feel free to write in chinese and we use e.g. google translator on our side 🙂

auto translated:
嗯，看来你用英语交流有困难
请随意用中文写，我们使用例如谷歌翻译在我们身边🙂

或者是我在 vue-router捕获异常 然后 重启vue-router?

[haoqunjiang]

• 你说的这段代码功能是插入 preload 标签，而 preload 仅仅起到提前获取资源、提高页面加载速度的作用，即使完全失败也不会影响其余前端代码的功能，所以和你碰到的问题应该没有关系。
• 错误捕获应该在路由或者异步组件这一层处理。
• 下次如果碰到问题，如果是使用上的疑惑，还请在 GitHub Discussions、StackOverflow 或者 Discord Server 中提问；如果认为是 bug 的，请按照 issue 模板填写必要的环境信息和复现代码。

[zezhongmiao]

• 你说的这段代码功能是插入 preload 标签，而 preload 仅仅起到提前获取资源、提高页面加载速度的作用，即使完全失败也不会影响其余前端代码的功能，所以和你碰到的问题应该没有关系。
• 错误捕获应该在路由或者异步组件这一层处理。
• 下次如果碰到问题，如果是使用上的疑惑，还请在 GitHub Discussions、StackOverflow 或者 Discord Server 中提问；如果认为是 bug 的，请按照 issue 模板填写必要的环境信息和复现代码。

路由 =》 动态组件 =》 断网 => seen[dep] = true =>网络恢复 =》 认为有缓存 =》不在加载动态组件

[haoqunjiang]

但是这个代码跟加载动态组件一点关系都没有啊？
preload 函数插入的是 link rel=preload 标签，只起到预加载作用，不会执行代码。
就算删掉也不会影响代码逻辑的。

[haoqunjiang]

还请再仔细看看这里的代码。
seen[dep] = true 之后不会再执行的是再一次插入 link 标签这个过程，这个是无关紧要的。

而异步组件断网后加载失败是因为 import() 这个 promise 被 reject 了，一个 promise 不能被 reject 两次，所以恢复网络后它也不会再执行。
一般用异步组件自带的错误处理机制、或者基于异步组件再包装一层来处理断网重连的情况。

[haoqunjiang]

OK，我再仔细看了一遍代码，收回「无关紧要」的说法。
如果出现了 CSS chunk 初次加载失败的情况，后续是有问题的。JS 没有问题。
我明天起床后再组织下语言，写个复现，再重新开个 issue 吧。

[zezhongmiao]

OK，我再仔细看了一遍代码，收回「无关紧要」的说法。
如果出现了 CSS chunk 初次加载失败的情况，后续是有问题的。JS 没有问题。
我明天起床后再组织下语言，写个复现，再重新开个 issue 吧。

是因为css 加载失败 导致 后面的路由 搞不动了么？ 大神 靠你了

[haoqunjiang]

这里有两个问题：

1. 网络恢复后，如果尝试重新加载这个异步模块，它对应的 CSS 文件不会重新加载，这是 Vite 的 bug；
2. JS 会被再次 import()，这一部分 Vite 的实现没有问题。但是目前 Safari 和 Chrome 实现的 import() 根据的是老的标准，初次 import 失败后，之后即使网络恢复了，也不会再次发起网络请求，而是直接返回失败。Firefox 没有这个问题。

第二个问题可能需要和这个 issue 一同解决 #3469 我们这周周会上会讨论一下。

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.