基於 Webpack 2 的 React Router 懶加載路由配置

基於 Webpack 2 的 React Router 懶加載路由配置承接基於Webpack 2的React組件懶加載，主要是對上一篇文章中的部分論述進行補充和修正，從屬於Web 前端入門與工程實踐。

前文說起，在 Webpack 1 中主要是由bundle-loader進行懶加載，而 Webpack 2 中引入了相似於 SystemJS 的System.import語法，首先咱們對於System.import的執行流程進行簡單闡述：

• Webpack 會在編譯過程當中掃描代碼庫時將發現的System.import調用引入的文件及其相關依賴進行單獨打包，注意，Webpack 會保證這些獨立模塊及其依賴不會與主應用的包體相沖突。

• 當咱們訪問到這些獨立打包的組件模塊時，Webpack 會發起 JSONP 請求來抓取相關的包體。

• System.import 一樣也是 Promise，在請求完成以後System.import會將抓取到的模塊做爲參數傳入then中的回調函數。

• 若是咱們重複訪問已經加載完畢的模塊，Webpack 不會重複執行抓取與解析的過程。

而 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) {
        ...
      },
    },
  ],
};

咱們能夠在getComponent 回調中以System.js進行動態抓取，筆者本身在Webpack2-React-Redux-Boilerplate定義了一個抽象輔助函數：

const getComponentLazily = (importor, name = 'default') => {
  return (location, cb) => {
    importor.then((module) => {
      //若是是默認模塊，則是 module.default
      cb(null, module[name]);
    })
      .catch((err) => {
        console.error(`動態路由加載失敗：${err}`)
      });
  }
};

咱們也能夠將同步路由與異步路由混合使用：

<Route path="/" history={browserHistory} component={Core}>
      <IndexRoute component={Home}/>
      <Route path="about" component={withRouter(About)}/>
      <Route path="users" getComponent={getComponentLazily(System.import('./component/users'),'Users')}/>
      <Route path="*" component={withRouter(Home)}/>
    </Route>

這樣最後打包生成的包體會發現有一個獨立的 Chunk: