1.使用@loadable/component方法：推荐使用这个
npm install @loadable/component -S 先安装一下
2.在app.js中引入 @loadable/component
import Loadable from '@loadable/component'
3. 引入组件
const Home=Loadable(()=>import('./views/Home.jsx'));
const Login=Loadable( ()=>import('./views/Login.jsx'));
const News=Loadable(()=>import('./views/news.jsx'));
4.引入按需加载组件后面使用和普通组件一样正常使用
<Route path=''/home'' component={Home}></Route>
<Route path=''/login'' component={Login}></Route>
下面是@loadable/component官方文档链接地址：
Getting Started - Loadable Components
2.使用react-loadable方法：可以使用，但是提示waring：建议用新API
Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: LoadableComponent
使用方法：
1.npm install react-loadable -S 先安装一下
2.先在app.js中引入
import Loadable from 'react-loadable'
3.app.js中引入组件home
const Home=Loadable({
loader:()=>import('./views/Home.jsx'),
loading:Loading
});
4.Loading也是组件。
然后就可以正常使用了。
<Route path="/home" component={Home}/>
3.使用Suspense配合lazy使用
1.无需下载安装其他插件，直接从react引用
import {Suspense，lazy} from 'react'
2.引入组件
//使用suspense和lazy路由懒加载
const Home=lazy(()=>import('./views/Home'))
const Login=lazy(()=>import('./views/Login'))
const News=lazy(()=>import('./views/news'))
3.路由使用Suspense包裹route即可。 记得fallback要传一个dom标签
<Suspense fallback={<div>正在加载中。。。</div>}>
<Route path="/home" component={Home}/>
<Route path=''/login'' component={Login}></Route>
</Suspense>;
