所有组件的代码都打包在bundle.js里，加载首页的时候，把其它页面的代码也加载了，影响首页加载速度。我们希望访问首页的时候只加载首页，访问详情页的时候再去加载详情页的代码。异步组件可以帮我们实现，需要使用第三方依赖“react-loadable”。
安装
npminstallreact-loadable--save使用
一、新建loadable.js
loadable.js：
importReact,{Component}from'react';importLoadablefrom'react-loadable';constLoadableComponent=Loadable({//意思是当前目录下的index组件是异步加载的loader:()=>import('./'),//加载时临时显示的组件loading:()=>{return
引入：
//不再是importDetailfrom'./pages/detail';importDetailfrom'./pages/detail/loadable';保存刷新页面，结果报下图错。
这是为什么呢？因为路由"/detail/:id"对应的组件是loadable.js,而不是之前的index.js，所以在loadable.js里可以获取到this.props.match.params.id，而index.js里获取不到。
三、修改index.js
需要在index.js里引入react-router-dom的withRouter方法。
import{withRouter}from'react-router-dom';使用withRouter(Detail)使Detail有能力获取到router里到所有参数。
exportdefaultconnect(mapStateToProps,mapDispatchToProps)(withRouter(Detail));