Wie Code-Aufteilung mit ReactQL zu tun?

Question

Out of the box, kommt ReactQL mit ein paar "Seiten" wie folgt definiert:

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> 
); 

jedoch Home und Page nur Komponenten in der gleichen Datei definiert sind. Angenommen, ich möchte nicht den gesamten Code laden, bis Sie zu dieser Seite navigiert sind, wie kann ich diese Seiten "code-splitten" und jede dieser Seiten in einen separaten Webpack-Chunk verschieben?

Beachten Sie, dass ReactQL SSR und React-Router angeblich unterstützt does not. Ist das, was ich möchte, möglich?

Answer 1

Ein Beispiel für Code-Splitting und SSR bei der Arbeit finden Sie unter this issue.

Ich arbeite derzeit an einer Anleitung und einer Hilfskomponente, die noch einen Schritt weiter gehen und einige Routine bieten, um dies auf eine routiniertere Weise zu tun.

Es ist sicherlich möglich, mit Reagieren Router: Siehe https://reacttraining.com/react-router/web/guides/code-splitting

https://reactql.org Update wird und hier ein Update zu veröffentlichen, wenn Sie fertig.