React.js 实现页面代码分割、按需加载 —— react-loadable 实现路由代码分割

最近在学习react，之前做的一个项目首屏加载速度很慢，便搜集了一些优化方法，react-loadable这个库是我在研究路由组件按需加载的过程中发现的。 import() 是es6的一种异步加载的方法。

npm i react-loadable --save

routeMap.jsx 

import React from 'react';
import {Router, Route, IndexRoute} from 'react-router';
import Loadable from 'react-loadable'; // 引入react-loadable

import Loading from '../components/loading/loading.jsx';
import App from '../containers/App.jsx';
const Home = Loadable({
  loader: () => import('../containers/Home/index.jsx'),
  loading: Loading
});
const List = Loadable({
  loader: () => import('../containers/List/index.jsx'),
  loading: Loading
});
const Detail = Loadable({
  loader: () => import('../containers/Detail/index.jsx'),
  loading: Loading
});
const NotFound = Loadable({loader: () => import('../containers/NotFound/index.jsx'),loading: Loading});

class RouteMap extends React.Component {
  render() {
    return (
      <Router history={this.props.history} onUpdate={this.updateRoute}>
        <Route path='/' component={App}>
          <IndexRoute component={Home}></IndexRoute>
          <Route path='detail/:id' component={Detail}></Route>
          <Route path='list' component={List}></Route>
          <Route path='*' component={NotFound}></Route>
        </Route>
      </Router>
    )
  }
  updateRoute () {
    console.log('路由更新了');
  }
}

export default RouteMap;

第二步：准备一个Loding组件。

loading.jsx

import React from 'react';

class Loading extends React.Component {
  render() {
    return (
      <div>
        <p>loading</p>
      </div>
    )
  }
}

export default Loading;