react-router - 使用 React Loadable 和 React Router 基于路由预取？

Question

我使用 React Router 和 React Loadable 根据路由对我的应用进行代码拆分：

在 App.js 中：

<Router>
    <Switch>
       <Route exact path="/page1" component={Component1Loader} />
       <Route exact path="/page2" component={Component2Loader} />

在 Component1Loader 中：

import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./ActualComponent1'),
    loading: Loading,
});

export default class Component1Loader extends React.Component {
    render() {
        return <LoadableComponent {...this.props} />;
    }
}

在 Component2Loader 中：

import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./ActualComponent2'),
    loading: Loading,
});

export default class Component2Loader extends React.Component {
    render() {
        return <LoadableComponent {...this.props} />;
    }
}

如何根据路由预加载组件？例如，大多数用户会从首页导航到 /page1，所以我想预加载它。

在 /page1 上时，我想预取 /page2。

Answer 1

Loadable 创建的组件公开了一个静态预加载方法。在您的情况下，您需要导出每个 LoadableComponent 并在您想要的适当文件 *.js 中预加载。例子：

import { LoadableComponent } from './Component1Loader'

// Preload here
LoadableComponent.preload()

...

<Router>
  <Switch>
    <Route exact path="/page1" component={Component1Loader} />
    <Route exact path="/page2" component={Component2Loader} />

https://github.com/jamiebuilds/react-loadable#preloading