我们肯定不希望用户进入我们的应用时，就下载全部的资源。可以考虑代码分割来增量式的下载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 />;
}
}
完整文档在这里
