search

erikras / react-redux-universal-hot-example

A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
MIT License
12k stars 2.5k forks source link

Code Splitting using Webpack or Webpack2 #1301

Open ashuorg opened 7 years ago

ashuorg commented 7 years ago

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

isaachinman commented 7 years ago

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

Swapnilchavan18 commented 7 years ago

Anyone had solution on code splitting with webpack?

bertho-zero commented 7 years ago

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.

Swapnilchavan18 commented 7 years ago

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 commented 7 years ago

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

bertho-zero commented 7 years ago

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

screenshot from 2016-12-10 13 26 08

bertho-zero commented 7 years ago

I improved code splitting on my fork: image

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

githubjosh commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

bertho-zero commented 7 years ago

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