How to do code splitting with ReactQL?

Question

Out of the box, ReactQL comes with a couple "pages" defined like this:

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

However, Home and Page are just components defined in the same file. Supposing I don't want to load all that code until you navigate to that page, how do I "code-split" and move each of those pages into a separate webpack chunk?

Note that ReactQL supports SSR and React-Router supposedly does not. Is what I'm asking possible?

score 2 · Accepted Answer · answered Apr 07 '17 at 08:48

2

See this issue for an example of code-splitting and SSR at work.

I'm currently working on a guide and a helper component that would go one step further, and provide some boilerplate to do this in a more routine fashion.

It's certainly possible with React Router: See https://reacttraining.com/react-router/web/guides/code-splitting

Will update https://reactql.org and post an update on here when complete.

answered Apr 07 '17 at 08:48

Lee Benson

11,185
6
43
57

1

The part that has me concerned is at the very [bottom of that page](https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering), the react-router guys said they couldn't get code-splitting to work on the server. The example you gave in that GitHub issue is nice, but `./test` is hardcoded so webpack can resolve it. Will it work if you pass that through a prop? I guess I'll wait for you to update the starter kit. Thanks for your help! Great library. – mpen Apr 07 '17 at 16:27
2

ReactQL builds a server bundle via Webpack in the same way as the client-side, so code-splitting gets polyfilled the same way in both environments. I'm guessing the RR guys were trying to do it manually (e.g. async client-side, but sync on the server), which would be much harder to reconcile. You'll still need static imports for any `import()` call to code split, but that shouldn't be a big issue to work around with the right patterns. I've added it to the roadmap -> https://github.com/leebenson/reactql/issues/10 – Lee Benson Apr 07 '17 at 21:23

How to do code splitting with ReactQL?

1 Answers1