ReactQLでコードを分割する方法は？ボックスのうち

Question

、ReactQLは次のように定義されたカップルの「ページ」が付属しています：

export default() => (
    <div> 
    <Helmet 
     title="ReactQL application" 
     meta={[{ 
     name: 'description', 
     content: 'ReactQL starter kit app', 
     }]} /> 
    <div className={css.hello}> 
     <img src={logo} alt="ReactQL" className={css.logo} /> 
    </div> 
    <hr /> 
    <GraphQLMessage /> 
    <hr /> 
    <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/page/about">About</Link></li> 
     <li><Link to="/page/contact">Contact</Link></li> 
    </ul> 
    <hr /> 
    <Route exact path="/" component={Home} /> 
    <Route path="/page/:name" component={Page} /> 
    <hr /> 
    <p>Runtime info:</p> 
    <Stats /> 
    <hr /> 
    <p>Stylesheet examples:</p> 
    <Styles /> 
    </div> 
); 

しかし、HomeとPageは同じファイルで定義されたコンポーネントだけです。そのページに移動するまで、そのコードをすべてロードしたくない場合、どのようにコード分割して、それぞれのページを別々のWebpackチャンクに移動するのですか？

ReactQLは、おそらくdoes notというSSRとReact-Routerをサポートしています。私は何を求めているのですか？

Answer 1

作業中のコード分割とSSRの例については、this issueを参照してください。

私は現在、さらに進歩するガイドとヘルパーコンポーネントを開発しており、より定例的なやり方でこれを行う定型文を提供しています。 https://reactql.orgを更新し、完了時、ここに更新を掲載しますhttps://reacttraining.com/react-router/web/guides/code-splitting

を参照してください：

それはルータは確かにリアクトで可能です。