react实现路由懒加载之我见

1. 下载 react-loadable

yarn add react-loadable 或者 npm install --save react-loadable

2、个人习惯吧，进行了封装，在src下新建utils文件夹下新建loadable.js文件，配置如下：

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

// 加载动画
const loadingComponent = () => {
    return <div>...loading</div>;
};

// 当不传加载动画时候使用默认的加载动画
export default (loader, loading = loadingComponent) => {
    return Loadable({
        loader,
        loading,
    });
};

3、在index.js文件里配置路由时候就可以使用如下方式进行懒加载处理

// 页面
// import My from './components/my/my'
// import Login from './components/my/login'
// import Forgetpass from './components/my/forgetpass'
// import Register from './components/my/register'



//引入刚刚编写的文件
import Loadable from './utils/loadable';


// 上边代码编写为下边这样
const My = Loadable(() => import('./components/my/my'));
const Login = Loadable(() => import('./components/my/login'));
const Forgetpass = Loadable(() => import('./components/my/forgetpass'));
const Register = Loadable(() => import('./components/my/register'));

4、再次进行打包编译，这就是从原来一个拆成多个，这样加载速度就会得到提升。

 

谢谢阅读！

                                                                                          明天会感谢今天努力的自己！