带有 webpack ES6 导入的可编程预取/预加载 javascript

问题描述

在大型 React SPA 中，我希望在用户打开/使用特定屏幕/功能时加载一些代码块。 我们的许多 React 组件都使用 const Component=React.lazy(() => import('./lazyCode'))

延迟加载

我想在渲染时获取并改善 UX 延迟。 由于 SPA 的规模和复杂性，我不想过早加载它们中的任何一个。

例如我想预加载下一个反应组件（及其依赖项），而“下一个”是基于用户输入的动态和条件。

Webpack 支持 ES6 import(/* webpackPrefetch: true */ './path/to/LoginModal.js');，但是它没有 API。什么时候触发预取目前还不清楚。

我可以对 import(pathToJs[i]) 链进行编程，但这不适用于浏览器中的 <link prefetch> 网络优先级。

Webpack 不提供用于获取要加载的实际 URL 的 API，因此我自己也无法<link prefetch>。

对于托管的吐出块延迟加载，我们可以做任何代码模式吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）