React introduced lazy and Suspense after version 16. With lazy and Suspense, routes can be lazy loaded and code split. Routes are not bundled into the same chunk and are loaded only when needed, which greatly reduces resource request time.

const OtherComponent = React.lazy((a)= > import(/* webpackChunkName: 'OtherComponent' */ './OtherComponent')); 
// It can only accept react components from export default, so it can separate otherComponent
// webpackChunkName this function is similar to renaming the split file, otherwise the package will be 0.chunk.js
Copy the code

Methods a

React.lazy and react. Suspense are used together to make things lazy

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

const Home = lazy((a)= > import(/* webpackChunkName: 'Home'*/ './Home'));
const List = lazy((a)= > import('./List')); 
// If there is no webpackChunkName, the package will be 0.chunk.js,1.chunk.js

const App = (a)= >( <Router> <Suspense fallback={<div>Loading... </div>}> <Switch> <Route exact path="/" Component ={Home}/> <Route path="/list" component={list}/> // or <Route path="/list" render={props => <Suspense fallback={<div>Loading</div>}><List {... Props} / > < / Suspense >} / > / / how happy how to < / Switch > < / Suspense > < / Router >);Copy the code

Method 2 (implemented with @babel/plugin-syntax-dynamic-import)

// childComponent
export default() = ><div>Dynamic import loads components</div>
// parentComponent
class ParentCom extends React.Component {
  constructor(props) {
    super(props);
    this.state  = {
      DynamicComponent: null
    }
  }
  loadComponent() {
    // We can use import like this via @babel/plugin-syntax-dynamic-import, where create-react-app is all set up and we don't need to do anything else
    // Install @babel/plugin-syntax-dynamic-import and configure it in.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>); }}Copy the code
// hookd4.jsx import React from 'react'; const Hooks4 = () => ( <span>hooks4</span> ); export const Test = () => <span>test</span> export default Hooks4; \ \ import React, {useState, useEffect, Suspense} from 'React '; const Hooks2 = () => { const [Conponent, setComponent] = useState(null); useEffect(() => { import('./hooks4.jsx').then((res) => { setComponent(() => res.default); });});});});});}); } []); return ( <span> hooks3 {Conponent &&<Conponent />} </span> ); } export default Hooks2;Copy the code

setComponent(() => res.default); When you use set to set the component back, you must wrap it with a function. Otherwise, you get unrendered react properties and cannot render them with react. CreateElement