4.11.2 实例强化（按需加载与 ReactRouter）
问题一： 按需加载与 ReactRouter？
实战中的例子：对采用了ReactRouter的应用进行按需加载优化。 这个例子由一个单页应用构成，这个单页应用由两个子页面构成，通过 ReactRouter 在两个子页面之间切换和管理路由。
这个单页应用的入口文件main.js如下：
import React, {PureComponent, createElement} from 'react';
import {render} from 'react-dom';
import {HashRouter, Route, Link} from 'react-router-dom';
import PageHome from './pages/home';
/**
异步加载组件
@param load 组件加载函数，load 函数会返回一个 Promise，在文件加载完成时 resolve
-
@returns {AsyncComponent} 返回一个高阶组件用于封装需要异步加载的组件
*/
function getAsyncComponent(load) {
return class AsyncComponent extends PureComponent {componentDidMount() {
// 在高阶组件 DidMount 时才去执行网络加载步骤
load().then(({default: component}) => {
// 代码加载成功，获取到了代码导出的值，调用 setState 通知高阶组件重新渲染子组件
this.setState({
component,
})
});
}render() {
const {component} = this.state || {};
// component 是 React.Component 类型，需要通过 React.createElement 生产一个组件实例
return component ? createElement(component) : null;
}
}
}
// 根组件
function App() {
return (
<HashRouter>
<div>
<nav>
<Link to='/'>Home</Link> | <Link to='/about'>About</Link> | <Link to='/login'>Login</Link>
</nav>
<Route exact path='/' component={PageHome}/>
<Route path='/about' component={getAsyncComponent(
// 异步加载函数，异步地加载 PageAbout 组件
() => import(/* webpackChunkName: 'page-about' /'./pages/about')
)}
/>
<Route path='/login' component={getAsyncComponent(
// 异步加载函数，异步地加载 PageAbout 组件
() => import(/ webpackChunkName: 'page-login' */'./pages/login')
)}
/>
</div>
</HashRouter>
)
}
// 渲染根组件
render(<App/>, window.document.getElementById('app'));
以上代码中最关键的部分是getAsyncComponent函数，它的作用是配合 ReactRouter 去按需加载组件，具体含义请看代码中的注释。
由于以上源码需要通过 Babel 去转换后才能在浏览器中正常运行，需要在 Webpack 中配置好对应的 babel-loader，源码先交给 babel-loader 处理后再交给 Webpack 去处理其中的import()语句。 但这样做后你很快会发现一个问题：Babel 报出错误说不认识import()语法。 导致这个问题的原因是import(*)语法还没有被加入到在ECMAScript 标准中去， 为此我们需要安装一个 Babel 插件babel-plugin-syntax-dynamic-import，并且将其加入到.babelrc中去：
{
"presets": [
"env",
"react"
],
"plugins": [
"syntax-dynamic-import"
]
}
执行 Webpack 构建后，你会发现输出了三个文件：
main.js：执行入口所在的代码块，同时还包括 PageHome 所需的代码，因为用户首次打开网页时就需要看到 PageHome 的内容，所以不对其进行按需加载，以降低用户能感知到的加载时间；
page-about.js：当用户访问/about时才会加载的代码块；
page-login.js：当用户访问/login时才会加载的代码块。
同时你还会发现page-about.js和page-login.js这两个文件在首页是不会加载的，而是会当你切换到了对应的子页面后文件才会开始加载。
