react性能优化——react-loadable按需加载，提高首屏页面加载效率

1、安装

yarn add react-loadable

2、封装公共组件

import React from "react";
import Loadable from "react-loadable";

export default (loader, ...props) =>

  Loadable({
    loader,
    //若传入了loading，则采用传入的这个
    loading: ({ error }) => (error ? <div>Error!</div> : <div>Loading...</div>),
    ...props,
  });

3、统一管理页面

import Loadable from './components/loadable';
const Home = Loadable(() => import('./components/Home/Home'));
const Login = Loadable(() => import('./components/Login/Login'));
export {Home ,Login }

4、在页面中使用

import {Home} from ""
//路径