Code splitting using webpack for example https://github.com/erikras/react-redux-universal-hot-example

Question

I want to code splitting of several routes together. For ex home and widgets in bundle1.js, survery and about in bundle2.js and login in bundle3.js.

So that when I refresh home page it will load only bundle1.js, on going to widgets page it will show widgets without getting additional files as Single page application.

When user clicks on survery it will download bundle2.js and show that page and so on. In this process page size will be kept low even as grows larger.

Production webpack link is https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/prod.config.js

Richard Scarrott · Accepted Answer · 2016-12-20 13:50:27Z

1

If defining split points with Webpack 1 you'll be able to pass a name for your split point allowing you to have multiple split points compile into a single chunk, e.g.

require.ensure([], () => {
    const Home = require('./home');
    // render Home.
}, 'bundle1');

require.ensure([], () => {
    const Widgets = require('./widgets');
    // render Widgets.
}, 'bundle1');

require.ensure([], () => {
    const Survey = require('./survey');
    // render Home.
}, 'bundle2');

The above will result in just two chunks, i.e.:

bundle1.js
bundle2.js

Unfortunately if you're using Webpack 2 with System.import() / import() instead of require.ensure it's not possible to name your chunks however there is talk of being able to provide config to the same effect here -- https://github.com/webpack/webpack/issues/1949

answered Dec 20, 2016 at 13:50

Richard Scarrott

7,0932 gold badges37 silver badges49 bronze badges

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

Comments

user1820017 · Accepted Answer · 2016-12-28 21:09:18Z

1

I followed https://github.com/bertho-zero/react-redux-universal-hot-example boilerplate, its updated and do code splitting with webpack 2

answered Dec 28, 2016 at 21:09

user1820017

571 gold badge2 silver badges11 bronze badges

1 Comment

Kévin Berthommier Over a year ago

I recently upgraded to react-router 4, still with SSR, code-splitting and data-fetching.

Collectives™ on Stack Overflow

Code splitting using webpack for example https://github.com/erikras/react-redux-universal-hot-example

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related