使用 webpack ES6 导入进行可编程预取/预加载 javascript

Question

在大型 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>自己也无法做到这一点。

我们可以为托管的吐出块延迟加载执行任何代码模式吗？

Answer 1

您可以参考react-loadable您的目的。它提供了一个预加载 API，以下是它的工作原理。

事实上，如果你想预加载，你可以execute an asynchronous import在任何需要的地方进行预加载，如下所示：

export function loadable(factory) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

// usage
const PageAComponent = loadable(() => import('./PageA.tsx'))

// some where
<button onMouseEnter={()=> {PageAComponent.preload()
}} />

至于PrefetchWebpack中，其原理是以HTML链接标签的形式预先将chunk插入到HTML文档中，无法动态控制。