React 如何添加路由懒加载

主体说明

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

如果你知道路由，或者已经配置好了，可以直接跳转到『添加懒加载』

配置路由

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