Как сделать разбиение кода с помощью 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 это просто компоненты, определенные в одном файле. Предположим, что я не хочу загружать весь этот код, пока вы не перейдете на эту страницу, как мне "разделить код" и переместить каждую из этих страниц в отдельный блок веб-пакета?

Обратите внимание, что ReactQL поддерживает SSR, а React-Router - нет. Возможно ли то, что я спрашиваю?

Answer 1

Посмотрите эту проблему для примера разделения кода и SSR на работе.

В настоящее время я работаю над руководством и вспомогательным компонентом, который продвинется на один шаг вперед и предоставит некоторый пример, чтобы сделать это более обычным способом.

С React Router это возможно: см. https://reacttraining.com/react-router/web/guides/code-splitting

Обновит https://reactql.org/ и опубликует обновление здесь после завершения.