如何使用 ReactQL 进行代码拆分？

Question

开箱即用，ReactQL 附带一对 "pages"，定义如下：

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 只是在同一个文件中定义的组件。假设我不想在您导航到该页面之前加载所有代码，我该如何 "code-split" 并将每个页面移动到单独的 webpack 块中？

请注意，ReactQL 支持 SSR，据说 React-Router does not。我问的可能吗？

Answer 1

有关工作中的代码拆分和 SSR 示例，请参阅 this issue。

我目前正在编写一个指南和一个辅助组件，它们将更进一步，并提供一些样板以更常规的方式执行此操作。

使用 React Router 肯定有可能：参见 https://reacttraining.com/react-router/web/guides/code-splitting

完成后将更新 https://reactql.org 和 post 此处的更新。

如何使用 ReactQL 进行代码拆分？

How to do code splitting with ReactQL?

webpack

react-router-v4

reactql