使用 React Loadable 进行代码拆分，使用容器进行路由

Question

我想实现每个主路由的代码拆分，这样每个页面都有自己的文件（及其子组件），例如我有一个主渲染函数，其中 Route 个组件指向容器：

    <Route path={`path1`} component={foo.container} />
    <Route path={`path2`} component={bar.container} />

每个容器看起来像这样：

const mapDispatchToProps = {
... actions etc ...
}

const mapStateToProps = (state) => ({
... selectors etc ...
})

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(withConnect)(MyComponent);

我尝试包装一个容器并在路线中引用它，但没有成功：

export default Loadable({
  loader: () => import('./MyContainer'),
  loading() {
    return (<div>Loading...</div>)
  },
});

那么应该包裹什么？

Answer 1

这里是一个简单的例子，如何使用 react-router 和 react-loadable 实现代码拆分：

MyPage.jsx - 您要在单独文件中生成的页面

import React from 'react';

const MyPage = () => (
    <div>My page</div>
);

export default MyPage;

可加载MyPage.jsx - 使您的页面可加载的包装器

import React from 'react';
import Loadable from 'react-loadable';

const LoadableMyPage = Loadable({
    loader: () => import('./MyPage'),
    loading: () => <div>Loading...</div>,
});

const LoadableMyPage = () => (
    <LoadableMyPage />
);

export default LoadableMyPage;

Router.jsx

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import LoadableMyPage from './LoadableMyPage';

const Router = () => (
    <Switch>
        <Route path="/" exact component={LoadableMyPage} />
        ...
    </Switch>
);

如@Mohit Tilwani 所述，动态导入插件是必需的，因为它目前在 stage-3 中，还不是 ECMAScript 的一部分。

https://github.com/tc39/proposal-dynamic-import

我开始研究我自己的 React 样板，我在其中实现了相同的代码拆分。如果你卡住了，请不要犹豫，检查它。

https://github.com/peetya/react-boilerplate

使用 React Loadable 进行代码拆分，使用容器进行路由

Code splitting with React Loadable and routes with containers

reactjs

react-router

react-router-v4

react-router-dom

react-loadable