主体阐明

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

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

配置路由

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代码。