Search code examples
reactjswebpackcreate-react-appcode-splitting

Combine multiple routes to code split bundles

In my create-react-app (CRA) application I was easily able to setup route-based code-splitting by following the official guide https://reactjs.org/docs/code-splitting.html#route-based-code-splitting

Now I could separate every single route into its own JS chunk but I would rather create 2 different bundles (one for the public area of my homepage, one with all pages for logged in users).

How would I separate my application into these two bundles? (I am still using react-router v3)

Edit: My routes are setup like this:

<Route
    path="/onepage/:id"
    component={RequireAuth(props => <Component1 {...props} />)}
/>
<Route
    path="/anotherpage"
    component={RequireAuth(props => <Component2 {...props} />)}
/>

Is it possible to wrap them in a higher level route (without changing the paths itself) ?

Solution

  • For any and all of my code-splitting needs, I have used react-loadable.

    You might want to try just splitting every route. Doesn't need to hurt much. But if that is too granular you can always wrap a higher level Route component.

    This won't actually work I just realized. In React Router v3 the Routes aren't actually components, just configuration. So your only good option is to wrap all the page level components.