如何使用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支持SSR和React路由器应该是不会。我想问的是可能吗？

Answer 1

请参阅本期中的代码分割和SSR工作示例。

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

当然，使用React路由器是可能的:请参见https://reacttraining.com/react-router/web/guides/code-splitting

将更新https://reactql.org并在完成后在此发布更新。