How can react lazyload child route using react-router?

Question

Now I am using react-route to control my routes!

You know I tried to build a single page app. There is only one entry file named index.js

When index.js is too heavy loading time will very long. Maybe 10000ms.

But there are many routes why must loaded them all first? If I can lazyload route not only child routes.

When I go to admin route it will load js file of admin and about will load js file of about , can I?

webpack bundle will have two files [name].js and come.js. But it too heavy.

Anyone meet the same problem?

Jagan · Accepted Answer · 2017-01-05 06:58:12Z

3

You can do lazy loading of React Components with react-router in two ways.

Webpack's require.ensure way When you go with this approach, you would be dealing with the react router object something like this,

childRoutes:[
    {
      path:"/pageone",
      getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageOne"));})
    },
    {
      path:"/pagetwo",
      getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageTwo"));})
    }
  ]

Webpack's bundle-loader way When you go with this approach, you would be dealing with the webpack loaders option.

module: {
  loaders: [{
    test: /.*/,
    include: [path.resolve(__dirname, 'pages/admin')],
    loader: 'bundle?lazy&name=admin'
   }]
}

You can find an example from react-router which uses bundle-loader and here is a nice blog about lazy-loading with bundle-loader and here is a blog with require.ensure

answered Jan 5, 2017 at 6:58

Jagan

5,2567 gold badges41 silver badges61 bronze badges

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

2 Comments

mqliutie Over a year ago

I have tried to use this way getComponent={(nextState, cb)=>{cb(null, require('./components/menu/MenuComboMain.react').default)}} on Route element Does this way have some advantages and disadvantages compare with yours

Jagan Over a year ago

just require will bundle all the modules at one shot. require.ensure will create separate files to lazy load the modules

Collectives™ on Stack Overflow

How can react lazyload child route using react-router?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related