使用 Lazy + Suspense 反应预加载组件答案

【问题标题】：React preloading components with Lazy + Suspense使用 Lazy + Suspense 反应预加载组件
【发布时间】：2018-11-11 20:21:31
【问题描述】：

我目前正在使用带有 Suspense 和 Lazy 的 React 16 来对我的代码库进行代码拆分。虽然我想预加载组件。

在下面的示例中，我有两条路线。有没有办法在Prime 安装后立即预加载Demo？我试图在Prime 页面的componentDidMount 中创建另一个动态导入，但React.lazy 似乎没有得到与下面的动态导入相同的文件。

import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import GlobalStyle from 'styles';

import Loading from 'common/Loading';
const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));
const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));

const App = () => (
  <main>
    <GlobalStyle />
    <Suspense fallback={<Loading>Loading...</Loading>}>
      <Switch>
        <Route path="/" component={Prime} exact />
        <Route path="/demo" component={Demo} />
      </Switch>
    </Suspense>
  </main>
);

export default withRouter(App);

所以我尝试了不同的方法，例如使用和不使用webpackChunkName 以及在componentDidMount 中导入其他组件的不同方法，如下所示。在componentDidMount 中导入文件的前两种方法导致了如下图底部所示的 Webpack 错误。只有第三个进行了，但是在图像中制作了文件2.[hash].js，仅在访问页面后加载，而不是在componentDidMount

我在这里缺少什么？

modules/Demo.jsx的代码：

import React from 'react';

import LogoIcon from 'vectors/logo.svg';
import PageLink from 'common/PageLink';
import Anchor from 'common/Anchor';
import CenteredSection from 'common/CenteredSection';

const Demo = () => (
  <CenteredSection variant="green">
    <LogoIcon />
    <PageLink to="/" variant="green">Go to home page</PageLink>
  </CenteredSection>
);

export default Demo;

【问题讨论】：

在 Prime 的 componentDidMount 中使用 lazy 对预加载情况没有任何好处，因为它会导致组件在渲染时被加载。方法 2 和 3 乍一看似乎很好，但是您遇到的错误 1 和 2 让我想查看 modules/Demo 的代码，因为似乎有什么东西导致了循环依赖。
@RyanC 感谢您的回复。我已经添加了演示页面的代码。你也可以在这里查看代码库：github.com/JBostelaar/react-prime/tree/progressive-web-app/src 我也认为第一种方法行不通，但我仍然想展示我尝试过的内容。 2 给出错误，3 没有预加载页面。
代码结构与我预期的有点不同。我期待看到modules/Demo.jsx 和modules/Prime.jsx。我并不是说你所拥有的是“错误的”，而是拥有 Demo/index.jsx 只是偏离了我使用的方法，我可以给出更自信的方向。
感谢您的意见，但我很确定问题不在于我的文件夹结构或命名。
不错的 webpackChunkName 用法。不知道你可以这样命名你的块，谢谢;)

标签： reactjs preload dynamic-import react-16

【解决方案1】：

这非常容易做到，我认为对于lazy() 和 Suspense 在幕后所做的事情存在误解。

React.lazy() 唯一的期望是它接受一个函数，该函数返回一个使用默认组件解析的 Promise。

React.lazy(() => Promise<{default: MyComponent}>)

所以如果你想预加载，你所要做的就是提前自己执行承诺。

// So change this, which will NOT preload
import React from 'react';
const MyLazyComp = React.lazy(() => import('./path/to/component'));

/*********************************************/

// To this, which WILL preload
import React from 'react';

// kicks off immediately when the current file is imported
const componentPromise = import('./path/to/component');

// by the time this gets rendered, your component is probably already loaded
// Suspense still works exactly the same with this.
const MyLazyComp = React.lazy(() => componentPromise);

这是一个已知的签名这一事实使其可用于各种其他情况。例如，我有一堆依赖于动态加载的谷歌地图 api 的组件，我能够创建一个加载谷歌地图 api 然后导入组件的函数。我不会详细说明这个示例的内部结构，因为它是一个切线，但重点是我为自己创建了一个函数，它执行一堆异步操作，然后返回一个带有 {default: Component} 对象的 Promise。

import React from 'react';
const MyLazyComp = React.lazy(() => importMapsComponent('./path/to/comp'));

【讨论】：

【解决方案2】：

不确定这会有多大帮助，但这是一个有效的code sandbox（演示由 componentDidMount 加载）。这是一个相当简化的代码版本，使用 create-react-app 进行配置。也许您可以以此为起点，逐渐将其变形为更接近您的应用，看看是什么导致动态导入不再按预期工作。

【讨论】：