反応ルータv4を使用したコード分割

Question

反応ルータv3ではSystem.importを使用してコード分割を実装しました。今ではアプリケーションをreact-router-v4にアップグレードしたいのですが、コードを分割できません。

マイroutes.jsファイル

function errorLoading(error) { 
    throw new Error(`Dynamic page loading failed: ${error}`); 
} 

function loadRoute(cb) { 
    return module => cb(null, module.default); 
} 

module.exports = { 
    path: '/', 
    indexRoute: { 
    getComponent(location, cb) { 
     System.import('../pages/IndexPage') 
     .then(loadRoute(cb)) 
     .catch(errorLoading); 
    } 
    }, 
    childRoutes: [{ 
    path: 'notifications', 
    indexRoute: { 
     getComponent(location, cb) { 
     System.import('../pages/NotificationPage') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
    }, 
    }] 
}; 

をして、私はちょうど、私のindex.jsファイルにルートをインポートし、あなたがES6ダイナミックインポートを使用できる場合

ReactDOM.render(
    <AppContainer> 
    <ApolloProvider store={store} client={client}> 
     <Router 
     history={browserHistory} 
     routes={routes} 
     /> 
    </ApolloProvider> 
    </AppContainer>, 
    rootNode 
); 

Answer 1

は、単にあなたのwebpack.jsでCommonsChunkPluginを使用することを忘れ決して

<Route 
  name="landing" 
  path="/" 
  getComponent={ 
    (_, cb) => import('./pages/LandingPage/LandingPage' /* webpackChunkName: 'landing' */) 
      .then((module) => cb(null, module.default)) 
      .catch((error) => cb(error, null)) 
  } 
</Route> 

のようなルートを追加することによって、それをやりました

Answer 2

のようにルートノードにそれらをレンダリングreact-loadableに行き、このようにコード分割を実装することができます：

export const AsyncComponent = Loadable({ 
    loader:() => import(/* webpackChunkName: "name" */ 'path/to/Component'), 
    loading:() => null 
}) 

// ... 
<Route path='some/path' component={AsyncComponent} /> 

Answer 3

チェックアウトreact-async-componentこれは、ルータに私のhapi-react-hot-loader-example

import {asyncComponent} from 'react-async-component'; 

export default asyncComponent({ 
    name: 'AboutAsync', 
    serverMode: 'resolve', 
    resolve:() => import(/* webpackChunkName: "About" */ './About'), 
}); 

に私のために素晴らしい仕事をしています

<Route 
    path="/about" 
    component={AboutAsync} 
/>