react代码分割（一）之react-loadable

react大型项目之代码分割

在使用react做大型项目时会遇到项目打包后文件过大，加载慢，等问题。这时候就需要能够分割代码，在react官网中提供了不少的代码分割方案

---

前言

这里简单介绍一个react-loadable的库，但是这个插件的库已经很久没更新了，建议使用官网推荐的方式

---

一、react-loadable

react-loadable具有丰富的功能，使用起来还是很不错的！
官网链接：react-loadable

二、使用示例

1.创建一个过渡组件

代码如下（示例）：

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

//通用的过场组件
const loadingComponent =({error, pastDelay})=>{
  if (error) {
    return <div>Error!</div>;
  } else if (pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  } 
};

//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = loadingComponent)=>{
    return Loadable({
        loader,
        loading,
    });
};

2.使用

代码如下（示例）：

const Login = loadable(() => import('@/views/container/Login/Login.js'));
const Deploy = loadable(() => import('@/views/container/deploy/index.js'));

---

其他方案

可以参照我的另一篇博客，采用的react官方方式解决代码分割问题，更推荐大家使用。
react代码分割（二）之react.lazy和Suspense组合