React Learning Series 6 react router realizes asynchronous on-demand loading module

The purpose of on-demand loading module is to realize code separation. When users open the home page, they do not need to download all the codes, but open a specific page to load specific codes. Improve the user experience.

If you use the react router, the official website documents will give you programme It's a bundle loader with web pack

You may have seen require.ensure, too. This is an old-fashioned way of writing web pack, which is not recommended now.

I tend to use import(), which is also recommended by webpack. Because it is more in line with the specifications. This article I have special introductions, and there are special introductions in the community programme.

I also use it in the project. The code is as follows
The City and Login pages are loading on demand. You can see in the network that the browser will first load a file like 1.chunk.js when entering these pages.

import React from 'react'
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import Home   from '$pages/Home/'
import List   from '$pages/List/'
// import City   from '$pages/City/'
// import Login  from '$pages/Login/'
import Detail from '$pages/Detail/'
import Search from '$pages/Search/'
import UserCenter  from '$pages/UserCenter/'
import Demo   from '$pages/Demo/'
import NoMatch from './404'

// Asynchronously load component s on demand
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(({default: Component}) => {
          AsyncComponent.Component = Component
          this.setState({ Component })
        })
      }
    }
    render() {
      const { Component } = this.state
      if (Component) {
        return <Component {...this.props} />
      }
      return null
    }
  }
}

function load(component) {
  return import(`$pages/${component}/`)
}

const Login = asyncComponent(() => load('Login'));
const City = asyncComponent(() => load('City'));

export class RouterMap extends React.Component {
  render() {
    return (
      <Router>
        <div>
          { /*
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/list">List</Link></li>
          </ul>
          <hr/>
          */ }
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/login/:refer?" component={Login} />
            <Route path="/city" component={City} />
            <Route path="/user" component={UserCenter} />
            <Route path="/list" component={List} />
            <Route exact path="/demo" component={Demo} />
            <Route path="/search/:category/:keyword?" component={Search} />
            <Route path="/detail/:id" component={Detail} />
            <Route component={NoMatch}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

If I feel this article is useful to you, my friend gave it to me project Point star

Tags: Front-end React Webpack network

Posted on Tue, 03 Dec 2019 00:45:00 -0500 by kee1108