Skip to content

Splitting Code for Routes

Pavel Lang edited this page May 5, 2016 · 1 revision

Extracted from Gitter, answer by @koistya:

As a first step, you would need to change routes to look something like this:

{
  path: '/posts/:id',
  async action() {
    const [ Post, data ] = await Promise.all([
      require.async('./Post'),
      fetch(`/api/posts/${id}`),
    ]);
    return <Layout><Post {...data} /></Layout>;
  }
}

Where React components are loaded asynchronously when user navigates between pages by using Webpack's require.ensure or with Webpack 2.0 System.load() See Code Splitting