详解webpack + react + react-router 如何实现懒加载
在本文中，我们将详细介绍如何使用webpack、React和React Router来实现懒加载。懒加载是一种优化技术，它可以将应用程序的初始加载时间缩短，从而提高用户体验。
让我们了解一下Webpack中的懒加载。在Webpack 1中，懒加载主要是由bundle-loader实现的，而在Webpack 2中，引入了类似于SystemJS的System.import语法。
System.import语法的执行流程可以分为以下几个步骤：
1. 在编译过程中，Webpack会扫描代码库时将发现的System.import调用引入的文件及其相关依赖进行单独打包。这意味着这些独立模块及其依赖不会与主应用的包体相冲突。
2. 当我们访问到这些独立打包的组件模块时，Webpack会发起JSONP请求来抓取相关的包体。
3. System.import也是一个Promise，在请求完成之后System.import会将抓取到的模块作为参数传入then中的回调函数。
4. 如果我们重复访问已经加载完毕的模块，Webpack不会重复执行抓取与解析的过程。
接下来，让我们了解一下React Router路由的懒加载。React Router路由的懒加载实际上分为动态路由和懒加载两步。典型的动态路由配置如下：
```
/
* <Route path="/" component={Core}>
* <IndexRoute component={Home}/>
* <Route path="about" component={About}/>
* <Route path="users" component={Users}>
* <Route path="*" component={Home}/>
* </Route>
*/
export default {
path: '/',
component: Core,
indexRoute: {
getComponent(location, cb) {
...
},
},
childRoutes: [
{
path: 'about',
getComponent(location, cb) {
...
},
},
{
path: 'users',
getComponent(location, cb) {
...
},
},
{
path: '*',
getComponent(location, cb) {
...
},
},
],
};
```
正常打包的路由写法可以使用以下代码：
```
import IndexPage from './views/app.jsx'
import AboutPage from './views/about.jsx'
export default function({history}) {
return (
<Router history={history}>
<Route path="/" component={IndexPage} />
<Route path="/about" component={AboutPage} />
</Router>
)
}
```
如果需要分割代码，我们需要改造下路由，借助getComponent和require.ensure实现代码分割：
```
export default function({history}) {
return (
<Router history={history}>
<Route path="/" getComponent={(location, callback) => {
require.ensure([], function(require) {
callback(null, require('./HomePage.jsx'))
})
}} />
<Route path="/about" getComponent={(location, callback) => {
require.ensure([], function(require) {
callback(null, require('./AboutPage.jsx'))
})
}} />
</Router>
)
}
```
这样可以实现懒加载，但是代码看起来很累，我们可以稍微改造下：
```
const home = (location, callback) => {
require.ensure([], require => {
callback(null, require('./HomePage.jsx'))
})
}
```
通过这种方式，我们可以实现懒加载，从而提高应用程序的性能。
