我们在某些网站上肯定看到过这样一种现象，页面上图片只有你滚动到那个位置附近的时候才会加载，否则就只占了个位，这就是延迟加载最普遍的应用场景。 我们react框架进行开发的时候也是一样，没有使用的组件是完全没必要加载的。

说道代码拆分就不得不说一个关键字:import 。 使用import动态导入模块。返回一个promise。如果在代码中动态导入一个模块，

那么webpack就会做一次代码拆分。把import导入的模块以及以来打成一个独立的js文件。默认情况下，页面是不会主动加载他的，只有用到他的时候才去加载。

但对于react组件来说怎么才算是用到呢?显然就是需要渲染他的时候。react提供了一个lazy函数用来将指定组件的导入行为封装成react组件。

一旦封装后的组件渲染也意味着要去加载被封装的组件。注意这里封装的是 组件的导入行为而不是组件本身。而且导入实际上意味着网络请求。

lazy的使用方法：

一、新建一个About组件

import React, {Component} from 'react';class About extends Component {    render() {        return (            
hello world
        );    }}export default About;

  二、建App组件,在react中导入lazy函数。然后用lazy封装About。lazy需要传入一个没有参数的函数，函数内部直接用一个import指令来导入。

lazy返回就是一个react组件。然后渲染About组件。

mport React, {Component, lazy} from 'react';const About = lazy(() => import("./About.jsx"));class App extends Component {    constructor(props) {        super(props);        this.state = {};    }    render() {        return (            
     
                    
                  
     
        );    }}export default App;

 

此时就这样运行的话肯定会有报错。那是因为用了lazy以后会有一个加载的空当。此时react不知道在这个空当需要显示什么所以需要我们指定。

该怎么指定呢？用Suspense    什么是Suspense呢？ 他是一个react中的内置组件专门用来和lazy配合的。我们先来引入。

import React, {Component, lazy, Suspense} from 'react';

 

然后用Suspense把About组件包起来。然后设置一个Suspense的一个属性：fallback。 fallback需要传入一个loading。

这个loading可以是一个loading组件。这里我们为简便期间直接写一个loading单词。

return (            
     
                
      
       loading...
      
     
}>                    
                                         );

 

这样就可以显示About组件的内容了。

这里是About能成功加载的情况下，那么如果About加载失败该怎么办呢？

react中有一个概念叫做ErrorBoundary错误边界。实际上就是能够捕获后台组件渲染错误的组件。他实际上是利用了react一个生命周期方法加错componentDidCatch。 那么怎么使用呢？看代码:

import React, {Component, lazy, Suspense} from 'react';const About = lazy(() => import("./About.jsx"));class App extends Component {    constructor(props) {        super(props);        this.state = {            hasError: false        };    }    componentDidCatch() {        this.setState({            hasError: true        })    }    render() {        if (this.state.hasError) {            return 
     
      error
     
        }        return (            
     
                
      
       loading...
      
     
}>                    
                                         );    }}export default App;

 

 这就是lazy的大致用法了。。