主体阐明

咱们会把流程分成两步：『配置路由』和『增加懒加载』。

如果你晓得路由，或者曾经配置好了，能够间接跳转到『增加懒加载』

配置路由

react 有两个包 react-router 和react-router-dom，如果只是 h5 开发，抉择后者即可。

装置依赖

因而，咱们首先装置好须要的路由包：

npm install --save react-router-dom

配置

比方咱们有两个页面 page1.jsx 和page2.jsx(如果是 tsx 也相似的)，那么，就须要在配置路由的中央增加上面代码(上面以入口文件为例)：

import React from "react"
import ReactDOM from 'react-dom'
import {HashRouter, Route, Switch} from 'react-router-dom'

import Page1 from './page1.jsx'
import Page2 from './page2.jsx'

ReactDOM.render((
    <HashRouter>
        <Switch>
            <Route exact path="/page1" component={Page1} />
            <Route exact path="/page2" component={Page2} />
        </Switch>
    </HashRouter>
), document.getElementById('root'))

而后，你在页面就能够拜访对应的页面了，比方第一页：http://localhost:8080/#/page1

增加懒加载

路由配置好了当前，你会发现，入口代码 、page1.jsx 和page2.jsx 三个页面打包成一个 js 了，如果交易特地多，那首屏渲染是十分慢的，怎么办？

装置依赖

首先，你须要装置一个用于懒加载的依赖包：

npm install --save react-lazily-component

引入并应用

接着，你须要在用的中央引入：

import ReactLazilyComponent from 'react-lazily-component'

而后，咱们把引入 page1.jsx 和page2.jsx的中央革新一下：

let Page1 = ReactLazilyComponent(() => import('./page1.jsx'))
let Page2 = ReactLazilyComponent(() => import('./page2.jsx'))

别的不变，再试试，就曾经实现懒加载了。

入口代码 、page1.jsx 和page2.jsx会打包成 三个 js，如果拜访 page1，只会加载 入口代码 和page1 代码。