在大型 React SPA 中,我希望当用户打开/使用特定屏幕/功能时加载一些代码块。 我们的许多 React 组件都是延迟加载的
const Component=React.lazy(() => import('./lazyCode'))
我想在渲染时获取并改善用户体验延迟。 由于 SPA 的规模和复杂性,我不想太早加载其中任何一个。
例如我想预加载下一个反应组件(及其依赖项),而“下一个”是基于用户输入的动态和条件。
Webpack 支持 ES6 import(/* webpackPrefetch: true */ './path/to/LoginModal.js'); 但是,它没有附带 API。实际上并不清楚什么时候会触发预取。
我可以编写一个
import(pathToJs[i])
链,但这不适用于浏览器中的 <link prefetch>
网络优先级。
Webpack 不提供 API 来获取要加载的实际 URL,因此我自己也无法做到
<link prefetch>
。
我们可以为托管的吐出块延迟加载做任何代码模式吗?