react实现路由懒加载（异步组件）

正如标题，react项目在打包完成后发现chunk.js文件比较大，导致打开首页需要时间比较久，因此，需要进行优化。

其实仔细考虑一下不难发现，由于打包后将所有资源都打包到了一个chunk.js下，导致所有资源都一起加载了，所以，进入页面会很慢。咱们的预期目标是进入首页只加载首页的资源，进入详情页至加载详情页的资源。那么，react-loadable是你不错的选择。

1、首先，要想使用它需要先安装它。

yarn add react-loadable
yarn add babel-plugin-syntax-dynamic-import

根据npm官网找到react-loadeable完成配置，当然我为了以后方便使用对react-loadable进行了封装。

2 其次，在utils文件夹下新建loadable.js文件，配置如下：

import React from "react";
import { Spin } from 'antd';
import Loadable from "react-loadable";

import './index.less'

// 加载动画
const loadingComponent = () => {
  return <div className={'spin-loading'}>
    <div><Spin size="large" /></div>
  </div>;
};

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

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

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Route } from "react-router-dom";

import { createBrowserHistory } from "history";
import loadable from './utils/loadable'

const App = loadable(() => import("./router/login/App"));
const MoveVideo = loadable(() => import("./router/video"));
const UserReg = loadable(() => import("./router/userReg/index"));
const FoodList = loadable(() => import("./router/food/index"));

ReactDOM.render(
  <Router history={createBrowserHistory()}>
    <Route exact path="/" component={App} />
    <Route path="/user-reg/" component={UserReg} />
    <Route path="/food-list" component={FoodList} />
    <Route path="/video" component={MoveVideo} />
  </Router>,
  document.getElementById("root")
);

serviceWorker.unregister();

4、再次进行打包编译，就会发现多出很多chunk.js文件，这就是从原来一个拆成多个，这样加载速度就会得到提升。