Code Splitting using Webpack or Webpack2

[ashuorg]

how we can split the bundle using webpack or webpack2 into something like Vendor.js, Home.js, Others.js.

[isaachinman]

I am also interested if anyone has gotten code splitting working, particularly by route.

[Swapnilchavan18]

Anyone had solution on code splitting with webpack?

[bertho-zero]

You can look this pull request: #1298

For Webpack2 config you can look my repo here: https://github.com/bertho-zero/react-redux-universal-hot-example (without code splitting)
Using webpack 2 allow to you use System.import.

[Swapnilchavan18]

Is it to do code splitting as per routes? For ex each route in 1 bundle.js or some corelated routes in another bundle.js so that while app grows, page size does not increase too much? Can it solve by route?

[bertho-zero]

I just added code splitting here: src/routes.js.

[bertho-zero]

It split the code by routes, one route in 1 bundle:

[bertho-zero]

I improved code splitting on my fork:

You can try it here: https://react-hot-example.herokuapp.com/

[githubjosh]

@bertho-zero i'm pretty sure your code splitting isn't outputting what you think.

The routes.js file is correctly loading page bundles, but your webpack entry file is client.js (which loads all routes a circular dependency): i.e. i think you're actually duplicating code in app bundle and your page-specific bundle. not tested

[isaachinman]

For anyone reading this trying to set up codesplitting, look into the webpack AggressiveMergingPlugin to remove duplicate code like @githubjosh is talking about.

[bertho-zero]

@githubjosh I think you're wrong, the size of the main bundle has decreased.
I have improved the codesplitting between the first and second image and the size of the main bundle has decreased again a bit.

[ashuorg]

@bertho-zero there is some problem with the server side rendering with your branch

[bertho-zero]

No, it's because the service worker serve files after the first load, you can do SHIFT+F5 for load from server (one time).