Guide-2019-05-10-React Router 4.

我们肯定不希望用户进入我们的应用时，就下载全部的资源。可以考虑代码分割来增量式的下载app。我们可以使用webpack、@babel/plugin-syntax-dynamic-import以及loadable-components.

webpack内置支持动态引入加载。

如果您使用babel, 就需要使用@babel/plugin-syntax-dynamic-import插件，这个插件只是一个语法，以为这babel不会做其他的额外转换。该插件只允许Babel解析动态导入，因此webpack可以将它们作为代码拆分进行捆绑。
然后您应该在.babelrc文件中进行如下配置：

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

loadable-components是一个用于加载具有动态导入的组件的库。它自动处理各种边缘情况，使代码分割变得简单！以下是如何使用可加载组件的示例：

import loadable from '@loadable/component'
import Loading from "./Loading";

const LoadableComponent = loadable(() => import('./Dashboard'), {
 fallback: Loading,
})

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

完整文档在这里