代码分割

基础

web 应用的一个很大优势就是用户不需要在使用前去下载整个软件包。你可以把代码分割当做渐进式的应用下载。为了达成这项目的，我们会使用 webpack, @babel/plugin-syntax-dynamic-import, 和 loadable-components。

webpack 已经提供了内置的动态模块加载支持了；但是，如果你在使用 Babel(将 JSX 语法转为 javascript)，你就需要@babel/plugin-syntax-dynamic-import 插件。这是一个语法层面的插件，也就是说 Babel 不会做任何语义层面上的转化。他的唯一目标就是让 Babel 能够处理动态加载语法并将其传给 webpack 来获得代码分割效果。你的.babelrc应该像如图一样配置：

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

loadable-components是一个动态加载组件的库。他为我们自动处理了大量的边界情况，将代码分割变的相当简单！这是一个使用 loadable-components 的示例：

import loadable from '@loadable/component'
import Loading from './Loading.js'

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

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

这就是全部了~ 你只需要在你的路由器中使用<LoadableDashboard> 组件，他会在路由导航到这个组件的时候自动加载。fallback 属性可以定义一个等待载入组件时候渲染的组件。

你可以在这里获得完整的文档。

服务端渲染

loadable-components 也提供了完整的服务端渲染文档