React动态加载模块react-loadable

为什么要动态加载

进入项目后会加载bundle.js，就是所有页面都打包到这里，第一次加载页面就把所有的页面都加载好了。

你进入的是首页，但是它把登录页，详情页。。。全部都加载出来了。

好处是：当你再进入其他页面的时候速度非常快
坏处是：当你的项目很大的时候，进第一进入时加载时间可能会很长

动态加载后

它不会把所有的页面都打包在一起，第一次进入的时候也不会直接加载所有页面。

当你进入登录页面的时候，才加载登录页面对应的打包后的文件；
当你进入详情页面的时候，就详情登录页面对应的打包后的文件；

代码

要安装 react-loadable 插件

定义

例如在详情页面目录下创建loadable.js

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

const LoadableComponent = Loadable({
    loader: () => import('./'),
    loading() {
        return 
正在加载...
    }
});

export default () => 

使用

App.js

import Detail from './pages/detail/loadable';