使用react-loadable实现代码分割

开发react单页应用的时候，我们打包后的代码会非常大，这会影响首页应用的加载速度，拉低用户体验，所以在开发工程中应该使用react-loadable来进行代码分割，将单个js文件切割成多个chunk.js，这样实现了代码的按需加载。
这是官网对于他的介绍

A higher order component for loading components with dynamic imports.
用于加载带有动态导入的组件的高阶组件。

下面是简单的实际操作：

安装

$yarn add react-loadable
$npm add react-loadable
$cnpm add react-loadable

配置懒加载

./router.js:

import React,{Component} from 'react'
import Loadable from 'react-loadable'
ar Home=Loadable({  //异步加载组件
    loader:()=>import("../App"),
    loading:()=><div>loading.....</div>
})
var NotFound = Loadable({
    loader:()=>import("../components/notfound"),
    loading:()=><div>loading.....</div>
})
var DashBoard = Loadable({
    loader:()=>import("../components/dashBoard"),
    loading:()=><div>loading.....</div>
})
})

import():
当你在webpack中使用import()时，它将自动为你分割代码
Loading…
呈现静态“Loading…”不能与用户进行足够的通信。您还需要考虑错误状态、超时，并使之成为一种良好的体验。
Loadable
用于在呈现模块之前动态加载模块的高阶组件，在模块不可用时呈现加载组件。它是一个高阶组件(一个创建组件的函数)，它允许您在将任何模块呈现到应用程序之前动态加载它。

const LoadableComponent = Loadable({
  loader: () => import('./Bar'),
  loading: Loading,
  delay: 200,
  timeout: 10000,//设置响应时间
});

关于react-loadable服务器渲染等更加高级操作可以参考官网
官网链接