react-redux-universal-hot-example icon indicating copy to clipboard operation
react-redux-universal-hot-example copied to clipboard

Published 20 hours ago • verified publisher icon erikras

Code Splitting using Webpack or Webpack2

Open ashuorg opened this issue 8 years ago • 12 comments

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

ashuorg avatar Oct 18 '16 06:10 ashuorg

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

isaachinman avatar Dec 02 '16 14:12 isaachinman

Anyone had solution on code splitting with webpack?

Swapnilchavan18 avatar Dec 07 '16 21:12 Swapnilchavan18

You can look this pull request: https://github.com/erikras/react-redux-universal-hot-example/pull/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.

bertho-zero avatar Dec 07 '16 22:12 bertho-zero

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?

Swapnilchavan18 avatar Dec 07 '16 22:12 Swapnilchavan18

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

bertho-zero avatar Dec 09 '16 23:12 bertho-zero

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

screenshot from 2016-12-10 13 26 08

bertho-zero avatar Dec 10 '16 12:12 bertho-zero

I improved code splitting on my fork: image

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

bertho-zero avatar Dec 18 '16 11:12 bertho-zero

@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

githubjosh avatar Dec 26 '16 13:12 githubjosh

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

isaachinman avatar Jan 22 '17 11:01 isaachinman

@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.

bertho-zero avatar Jan 22 '17 15:01 bertho-zero

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

ashuorg avatar Jun 03 '17 18:06 ashuorg

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

bertho-zero avatar Jun 05 '17 17:06 bertho-zero