react的路由懒加载，代码分割

react在16版本后引入了lazy和Suspense，利用这两个可以做到路由的懒加载和代码分割，不会让所有的路由都统统打包到同一个chunk中去，在用到的时候才会去加载，可以大大节省请求资源所需要消耗的时间。

const OtherComponent = React.lazy(() => import(/* webpackChunkName: 'OtherComponent' */ './OtherComponent')); 
// 它只能接收 export default出来的react组件，这样就能将otherComponent这个组件分割出来了
// webpackChunkName 这个的作用相当于是给分割出来的文件重新命名，不然打包出来的就会使0.chunk.js这样的

方法一

React.lazy和React.Suspense这两个是结合起来一起用的，这样就能做到懒加载的效果

import React, { lazy, Suspense } from 'react';
import import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import(/* webpackChunkName: 'Home'*/ './Home'));
const List = lazy(() => import('./List')); 
// 这里不写webpackChunkName的话打包出来的的会是0.chunk.js,1.chunk.js这样的包

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/list" component={List}/>
        // 或者
        <Route path="/list" render={props => <Suspense fallback={<div>Loading</div>}><List {...props} /></Suspense>}/> 
        // 怎么开心怎么来
      </Switch>
    </Suspense>
  </Router>
);

打包截图

方法二（利用@babel/plugin-syntax-dynamic-import实现）

// childComponent
export default () => <div>动态import加载组件</div>
// parentComponent
class ParentCom extends React.Component {
  constructor(props) {
    super(props);
    this.state  = {
      DynamicComponent: null
    }
  }
  loadComponent() {
    // 能够这样使用import其实是通过babel的@babel/plugin-syntax-dynamic-import实现的，这里create-react-app已经全部都弄好了，不需要我们再做任何操作
    // 如果是自己搭建的话 需要安装 @babel/plugin-syntax-dynamic-import，并且在.babelrc里面配置一下
    // "plugins": [ "@babel/plugin-syntax-dynamic-import" ]
    import('./childComponent.js').then((res) => {
      this.setState({
        DynamicComponent: res.default
      });
    });
  }
  render() {
    return (
      <div>
        { DynamicComponent&& <DynamicComponent/> }
        <button onClick={this.loadComponent.bind(this)}>loadComponent</button>
      </div>
    );
  }
}

// hookd4.jsx
import React from 'react';

const Hooks4 = () => (
  <span>hooks4</span>
);

export const Test = () => <span>test</span>

export default Hooks4;


// 在hooks中使用
import React, { useState, useEffect, Suspense } from 'react';

const Hooks2 = () => {
  const [Conponent, setComponent] = useState(null);
  useEffect(() => {
    import('./hooks4.jsx').then((res) => {
      setComponent(() => res.default); // 因为hooks4.jsx是需要default导出的那段代码,如果想使用Test那段带码就只需要把res.default改成res.Test就好了
    });
  }, []);
  
  return (
    <span>
      hooks3
      {Conponent &&<Conponent />}
    </span>
  );
}

export default Hooks2;

setComponent(() => res.default);
在使用set函数把得到的组件设置回去的时候必须要通过函数包裹一层，不然就会得到react还未渲染的属性而且也不能通过React.createElement进行渲染出来，只有包裹之后得到的才是想要的函数

没有使用函数进行包裹
使用函数包裹后