react学习系列6 react-router 实现异步按需加载模块

简介: 按需加载模块的目的是实现代码分隔,用户打开首页时不用下载全部的代码,打开特定的页面加载特定的代码。提高用户体验。如果使用的是react-router,官网文档给出的 方案 是用webpack的bundle-loader你可能也见过require.ensure。

按需加载模块的目的是实现代码分隔,用户打开首页时不用下载全部的代码,打开特定的页面加载特定的代码。提高用户体验。

如果使用的是react-router,官网文档给出的 方案 是用webpack的bundle-loader

你可能也见过require.ensure。这是webpack的旧式写法,现在已不推荐。

我倾向于使用import(),这也是webpack推荐的。因为更符合规范。 这篇 我有专门的介绍,社区中也有专门的 方案

我也用到项目中,代码如下
其中City和Login页面是按需加载中的,你可以在network中看到进入这俩页面浏览器会先加载类似 1.chunk.js文件。

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'

// 异步按需加载component
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>
    );
  }
}

如果感觉这篇对你有用的朋友给我的 项目 点个star

相关文章
|
6天前
|
前端开发 JavaScript API
如何学习react
【4月更文挑战第9天】 学习React前,需掌握JavaScript基础,了解React的JSX、组件、props、state和生命周期等概念。安装Node.js和npm,用Create React App搭建环境。学习核心API,如React.createElement、React.render等,并阅读官方文档。实践项目,从Todo List开始,逐渐挑战复杂应用。同时,学习相关技术如Redux、React Router,并参与社区交流,持续关注React新发展。持之以恒,祝学习顺利!
24 10
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
4月前
|
人工智能 JSON 前端开发
react17+ts 学习
react17+ts 学习
|
30天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
3月前
|
Rust 前端开发 JavaScript
IM跨平台技术学习(十):快速对比跨平台框架Electron、Flutter、Tauri、React Native等
在本文中,我们将比较五种流行的桌面应用程序开发框架:Electron、Flutter、Tauri、React Native 和 Qt,希望可以帮助你根据项目需求做出明智的技术选型决策。
143 2
|
4月前
|
前端开发 JavaScript API
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
34 0
|
11天前
|
前端开发
【React学习】—SetState的使用(九)
【React学习】—SetState的使用(九)
|
4月前
|
前端开发 JavaScript
【React学习】—React中的事件绑定(八)
【React学习】—React中的事件绑定(八)
|
4月前
|
前端开发
【React学习】—组件三大核心属性: state(七)
【React学习】—组件三大核心属性: state(七)