react异步组件

正常情况下，我们进入项目，在各个页面跳转，这个时候，在控制台可以看到，只加载了bundle.js文件。也就是说，我们所有页面对应的组件的代码都在这个bundle.js里边。

想象一下，当我们只访问首页的时候，其他页面的代码也被一起加载了，如果项目很庞大复杂，bundle.js文件体积很大，那么首页加载的速度就会很慢。我们希望的是，当我们访问首页的时候，就加载首页的代码，当我们访问详情页面的时候，就加载详情页面的代码。这个时候就需要借助异步组件来实现。

异步组件底层比较复杂，但是我们可以通过封装起来的第三方模块来实现会非常简单。

以简书项目为例，我如果想让详情页面通过异步的方式加载，需要怎么做呢？

• 安装react-loadable npm install react-loadable
• 在detail文件夹下创建 loadable.js文件

// loading方法需要jsx，所以需要引入react以解析jsx语法
import react from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
  // 通过import 异步加载 当前目录下 index.js 也就是detail这个组件
  loader: () => import('./'),
  // 加载是需要时间的，在加载完成之前通过loading函数，返回要显示的内容
  loading(){
      return <div>正在加载。。。</div>
  }
});

// 无状态组件把LoadableComponent组件返回出去
export default () => <LoadableComponent/>

• 然后 App.js里引入Detail的时候，不是引入 detail下的index.js了，而是引入 detail下的loadable.js

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

然后，当我们再次访问首页的时候，加载的bundle.js里，就没有detail的组件代码了，当我们进入到详情页面，就会加载详情页面的组件代码。

image.png