React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都在同一文件中(bundle.js)，整个js文件很大，从而导致首屏加载时间过长.所有，可以对组件进行异步加载处理，可以使用 React-loadable实现。

安装

yarn add react-loadable

在没有使用react-loadable之前，在我们的router.js里面是直接import Login这个组件的

import React from "react";

import {

BrowserRouter as Router,

Route,

Switch

} from "react-router-dom";

import Login from "../pages/Login/Login";

class RouteConfig extends React.Component {

render() {

return (

);

}

}

export default RouteConfig;

运行项目查看network记录

image.png

可以看到1.chunk.js是1.5MB

现在我们来添加react-loadable(可通过上面安装方法安装)

完后在src/utils 下新建一个公共封装的loadable.js，代码如下：

import React from "react";

import Loadable from "react-loadable";

const loadingComponent = () => {

return

};

export default (loader, loading = loadingComponent) => {

return Loadable({

loader,

loading,

});

};

接收一个配置对象为参数,第一个属性名为loader，是一个方法，用于动态加载我们所需要的模块，第二个参数就是我们的Loading组件咯，在动态加载还未完成的过程中会有该组件占位。

我们可以将按需加载的组件和过渡组件通过参数传入最后返回包装后的组件

在router.js里面做如下修改

import React from "react";

import {

BrowserRouter as Router,

Route,

Switch

} from "react-router-dom";

const Login = loadable(() => import("../pages/Login/Login"));

class RouteConfig extends React.Component {

render() {

return (

);

}

}

export default RouteConfig;

运行项目查看network记录

image.png

这个时候1.chunk.js是1.0MB，因为只加载所需的依赖，工作原理其实就是在页面组件上有包了一成高级组件来代替原来的页面组件