使用Lazy + Suspense对预加载组件进行反应

Question

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

在我的例子中，我有两条路线。有没有办法预先加载Demo Prime安装？我试图在componentDidMount页面的Prime中创建另一个动态导入，但是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;

Answer 1

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