react项目路由组件懒加载方法对比，@loadable/component和react-loadable和suspense lazy

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.引入按需加载组件后面使用和普通组件一样正常使用

下面是@loadable/component官方文档链接地址：

Getting Started - Loadable Components

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也是组件。

然后就可以正常使用了。

 

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标签

正在加载中。。。

}>

         

        

;