Redux examples - bundle optimization

Question

The redux repository has a set of examples. The problem is that they are for development builds and i'm using them as a template for an app.

This particular example - https://github.com/reactjs/redux/blob/master/examples/real-world/webpack.config.js Builds a bundle.js that is 4MB.

I have tried minifying the code, but I can't shrink the size of the bundle. What am i doing wrong?

score 0 · Answer 1 · answered Jul 16 '16 at 21:14

0

Can you tell if it's bundling React as well? That would be a big addition to the size of the bundle. You can exclude it from the build by adding this to webpack.config.js:

externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }

Then you would provide React and ReactDOM separately via another script tag hosted locally or on a CDN.

answered Jul 16 '16 at 21:14

Radio-

3,151
21
22

That took the bundle down to 2.8 MB which is still incredibly large - I think there's just something about this repo that i dont' understand yet. I checked out another boilerplate that minifies by to less than a MB – seasick Jul 16 '16 at 21:21

score 0 · Answer 2 · answered Jun 24 '17 at 13:11

You need to minimize and tree-shake.

A working example can be found as redux-auto/example. You can generate a production bundle by running npm build @ 0.27MB vs npm start @ 1.16 MB = Thats a saving of 420%

The redux-auto example also comes with hot-reloading, ES6, React & Redux if you want to use it as a base

If you want to do this in your own project check out webpack.prod.js and .babelrc

Redux examples - bundle optimization

2 Answers2