主體説明

我們會把流程分成兩步：『配置路由』和『添加懶加載』。

如果你知道路由，或者已經配置好了，可以直接跳轉到『添加懶加載』

配置路由

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