CODEWITHSUNDEEP
reactjswebpack
Guy
Guy

Reputation: 13336

Redux + React understanding size of webpack bundle

I read various answers like this regarding reducing the bundle size. First I wanted to understand what is going on with my 13MB bundle, so I've installed the Webpack Bundle Size Analyzer. It generated this output:

analyzer1 analyzer2

There are a few things I don't understand:

  1. Why is react appearing twice with two different sizes?
  2. How come it doesn't add up to 13MB? (it's around 4.75MB)
  3. Does this means my own code is only 4KB? (last line)
  4. Is it possible to understand from this tree how to save KBs? I mean, for instance, is there a way to use only parts of lodash or is it required as a whole by React?

Update: Found the answer for #1. React-color requires ReactCSS which requires a different version of react and lodash. Without React-color my bundle dropped from 13MB to 8MB. I will try to find a way to re-use react and lodash.

Upvotes: 1

Views: 763

Answers (2)

1ven
1ven

Reputation: 7026

It seems that you have eval-source-map devtool option in your webpack config file, that's why you are getting such huge bundle size. This way, sourcemaps are putting inside of bundle js file.

Try to change this option to source-map to build source maps separately.

// webpack.config.js
{
  devtool: 'source-map',
  // ... other options
}

Upvotes: 3

tmaximini
tmaximini

Reputation: 8503

1) Sometimes other dependencies require again lodash and / or react, so these dependencies are pulled in multiple times by webpack (usually happens when the version differs), here the DedupePlugin should help. The final bundle size also depends on your devtool entry in webpack, so in development it is usually much bigger as you probably have sourcemaps enabled and a your build is not optimized. Hard to tell without your actual webpack config.

2) Maybe webpack is already deduping?

3) last line says 400KB

4) You can definitely save a few kbs. A good way to start is using lodash-webpack-plugin with babel-plugin-lodash, this will import only the lodash methods you are actually using instead of the complete library. You can also just require the bits you need from material-ui as outlined in this answer. I recently added the webpack-dashboard to my webpack config, so I instantly see the output and percentages that make up my bundle size, so maybe you think twice about adding huge dependencies if you don't really need them.

Upvotes: 2

Related Questions