Code Splitting by using react router v4

Question

In react router v3 i have implemented the code splitting using System.import, Now i want to upgrade my app to react-router-v4 but the problem is that i am unable to split my code.

My routes.js file

function errorLoading(error) {
  throw new Error(`Dynamic page loading failed: ${error}`);
}

function loadRoute(cb) {
  return module => cb(null, module.default);
}

module.exports = {
  path: '/',
  indexRoute: {
    getComponent(location, cb) {
      System.import('../pages/IndexPage')
        .then(loadRoute(cb))
        .catch(errorLoading);
    }
  },
  childRoutes: [{
    path: 'notifications',
    indexRoute: {
      getComponent(location, cb) {
        System.import('../pages/NotificationPage')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
  }]
};

and then i just imported the routes in my index.js file and rendered them to rootNode like

ReactDOM.render(
  <AppContainer>
    <ApolloProvider store={store} client={client}>
      <Router
        history={browserHistory}
        routes={routes}
      />
    </ApolloProvider>
  </AppContainer>,
  rootNode
);

Here’s an awesome video tutorial with code samples that you can follow to set up code splitting with React Router 4+ youtu.be/j8NJc60H294 — Grgur
– Grgur, Commented Dec 20, 2019 at 17:08

codeBelt · Accepted Answer · 2017-09-07 15:03:06Z

2

Check out react-async-component. It has worked great for me on my hapi-react-hot-loader-example

import {asyncComponent} from 'react-async-component';

export default asyncComponent({
    name: 'AboutAsync',
    serverMode: 'resolve',
    resolve: () => import(/* webpackChunkName: "About" */ './About'),
});

In the Router:

<Route
    path="/about"
    component={AboutAsync}
/>

answered Sep 7, 2017 at 15:03

codeBelt

1,81518 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saad Over a year ago

Thanks codeBelt it worked and i also found a better solution without using any external package

Adrien Mangeot · Accepted Answer · 2017-08-11 13:33:47Z

0

If you can use ES6 dynamic imports, you could go for react-loadable and implement code-splitting this way:

export const AsyncComponent = Loadable({
  loader: () => import(/* webpackChunkName: "name" */ 'path/to/Component'),
  loading: () => null
})

// ...
<Route path='some/path' component={AsyncComponent} />

answered Aug 11, 2017 at 13:33

Adrien Mangeot

217 bronze badges

Comments

Saad · Accepted Answer · 2017-09-15 19:33:31Z

0

Did it by simply adding routes like

<Route
  name="landing"
  path="/"
  getComponent={
    (_, cb) => import('./pages/LandingPage/LandingPage' /* webpackChunkName: 'landing' */)
      .then((module) => cb(null, module.default))
      .catch((error) => cb(error, null))
  }
</Route>

Never forget to use the CommonsChunkPlugin in your webpack.js

answered Sep 15, 2017 at 19:33

Saad

6871 gold badge7 silver badges27 bronze badges

1 Comment

tommyalvarez Over a year ago

Is this possible with the new webpack v4 that deprecates the CommonsChunkPlugin ? Or better said, how to do it with the new version

Collectives™ on Stack Overflow

Code Splitting by using react router v4

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related