В настоящее время я использую React 16 с Suspense и Lazy, чтобы разделить код моей базы кода.Хотя я бы хотел предварительно загрузить компоненты.
В моем примере ниже я получил два маршрута.Есть ли способ предварительно загрузить 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;