性能优化 路由懒加载 react-loadable

最近突然有一个性能优化的需求 因为首页记载时间太长 所以我们用这个插件 实现路由的懒加载

react-loadable 

首先

npm i react-loadable

然后我就在我们写的公用方法的utils文件夹中加里加了一个 loadable.js文件

代码如下：

import React from 'react';
import Loadable from 'react-loadable';
 
//通用的过场组件
const LoadingComponent =()=>{
    return (
        <div></div>
    )
}
 
//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = LoadingComponent)=>{
    return Loadable({
        loader,
        loading
    });
}

然后在去 router 文件夹下 找到所有关于路由加载的组件更改它的引用方式

如下：

 import Home from '../home/Home';
 改成 
 import Loadable from '../utils/loadable';
 const Home = Loadable(() => import('../home/Home'));