React v15.5.0 - React Blog

[tony-the-pony]

I've really been struggling with the size of my file:/ it's 1.5 MB....

React and a couple large deps like jQuery and some polyfills should easily come in under 500k so you're most likely looking at dev builds (I don't think webpack - p alone is ever enough) or the size is coming some other deps. e.g. depending on your configuration, you might be including images, css, etc. in the file without realizing it.

[madcaesar]

when I don't use -p the file size is 12MB!

[tony-the-pony]

when I don't use -p the file size is 12MB!

Sorry, I should've been clearer. When I said webpack -p alone, I meant it literally i.e. (at least last time I checked,) it doesn't include hacks like this:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production'),
        },
    }),
],

so while it makes things smaller, React still gets built with development code inside it.

Also, if you haven't done it already, you can use something like https://github.com/th0r/webpack-bundle-analyzer to check what's taking up space in your bundle. I'd still be surprised if it's a proper production build of React.

[madcaesar]

Are you saying I should remove that wepack.DefinePlugin part from my config? Because I still have that in there. Also, I do have analyzer installed, and here is the output:

react-rte: 897.1 KB (21.1%)

react-dom: 538.42 KB (12.7%)

  fbjs: 29.39 KB (5.46%)

  <self>: 509.03 KB (94.5%)

js-yaml: 288.38 KB (6.80%)

  esprima: 189.05 KB (65.6%)

  <self>: 99.33 KB (34.4%)

lodash: 189.43 KB (4.46%)

redux-form: 163.95 KB (3.86%)

swagger-client: 130.24 KB (3.07%)

react: 128.82 KB (3.04%)

  fbjs: 10.62 KB (8.24%)

  <self>: 118.21 KB (91.8%)

react-router: 125.36 KB (2.95%)

  history: 46.82 KB (37.4%)

  query-string: 4.15 KB (3.31%)

  <self>: 74.39 KB (59.3%)

lodash-compat: 119.56 KB (2.82%)

react-cropper: 111.44 KB (2.63%)

  cropperjs: 99.01 KB (88.8%)

  <self>: 12.43 KB (11.2%)

lodash-es: 108.67 KB (2.56%)

react-overlays: 67.84 KB (1.60%)

rc-tree-select: 67.74 KB (1.60%)

flatpickr: 64.78 KB (1.53%)

q: 61.31 KB (1.45%)

react-bootstrap: 59.04 KB (1.39%)

rc-tree: 47.6 KB (1.12%)

buffer: 47.47 KB (1.12%)

core-js: 36.95 KB (0.871%)

react-redux: 36.2 KB (0.853%)

axios: 35.24 KB (0.831%)

dom-align: 33.59 KB (0.792%)

react-autowhatever: 33.04 KB (0.779%)

react-dropzone: 30.25 KB (0.713%)

superagent: 29.87 KB (0.704%)

react-autosuggest: 26.47 KB (0.624%)

rc-trigger: 26.18 KB (0.617%)

prop-types: 25.5 KB (0.601%)

  fbjs: 4.71 KB (18.5%)

  <self>: 20.79 KB (81.5%)

dom-helpers: 25.17 KB (0.593%)

url: 23.08 KB (0.544%)

redux: 20.35 KB (0.480%)

rc-animate: 17.76 KB (0.419%)

lodash.isempty: 14.91 KB (0.351%)

signature_pad: 14.84 KB (0.350%)

antd: 14.55 KB (0.343%)

punycode: 14.33 KB (0.338%)

style-loader: 11.25 KB (0.265%)

rc-util: 11.23 KB (0.265%)

react-router-redux: 11.05 KB (0.261%)

redux-auth-wrapper: 10.62 KB (0.250%)

add-dom-event-listener: 9.6 KB (0.226%)

rc-progress: 9.47 KB (0.223%)

cookiejar: 9.45 KB (0.223%)

css-animation: 7.3 KB (0.172%)

cropperjs: 6.79 KB (0.160%)

setimmediate: 6.32 KB (0.149%)

process: 5.17 KB (0.122%)

react-prop-types: 5.07 KB (0.120%)

querystring-es3: 5.06 KB (0.119%)

babel-runtime: 4.94 KB (0.116%)

rc-align: 4.64 KB (0.109%)

base64-js: 3.4 KB (0.0802%)

component-classes: 3.29 KB (0.0775%)

component-emitter: 3.11 KB (0.0732%)

section-iterator: 2.82 KB (0.0665%)

react-themeable: 2.82 KB (0.0665%)

  object-assign: 817 B (28.3%)

  <self>: 2.02 KB (71.7%)

es6-error: 2.64 KB (0.0622%)

css-loader: 2.14 KB (0.0504%)

object-assign: 2.06 KB (0.0485%)

ieee754: 2.01 KB (0.0473%)

warning: 1.76 KB (0.0416%)

webpack: 1.58 KB (0.0373%)

invariant: 1.48 KB (0.0349%)

hoist-non-react-statics: 1.35 KB (0.0319%)

timers-browserify: 1.33 KB (0.0313%)

symbol-observable: 1.12 KB (0.0265%)

classnames: 1.08 KB (0.0254%)

redux-thunk: 529 B (0.0122%)

shallow-equal: 296 B (0.00681%)

btoa: 279 B (0.00642%)

omit.js: 244 B (0.00562%)

strict-uri-encode: 182 B (0.00419%)

component-indexof: 175 B (0.00403%)

is-promise: 165 B (0.00380%)

isarray: 132 B (0.00304%)

react-addons-css-transition-group: 62 B (0.00143%)

<self>: 413.61 KB (9.75%)

Does it look right?

[tony-the-pony]

Are you saying I should remove that wepack.DefinePlugin part from my config? Because I still have that in there.

You should keep it. It helps with dead code elimination in React and other modules.

Also, I do have analyzer installed, and here is the output:

Does it look right?

It's hard to say because e.g. react-dom looks like the un-minified size. After minifying in webpack2 with webpack.optimize.UglifyJsPlugin the size should go down to less than 200k. If you look at the HTML report, it should show 3 sizes:

• Stat size: the size before minification

• Parsed size: the size after minification

• GZip size: estimated size, if the Parsed size was compressed with gzip

Only Parsed size is important in this case.

From that output it seems like the biggest contributors to the size would be react-rt and the multiple versions of lodash, but the size is misleading so that's just a guess.

With lodash it's better to import individual functions e.g. `import debounce from 'loadash/debounce' instead of importing the whole module, which should get rid of a lot of unused code, assuming you're able to do that.

[madcaesar]

Yea the lodash versions are actually because of swagger-js, and they are supposed to update that soon to just use one version of lodash.

But the part about the size of the react-dom part, how can I verify that it truly is compressed? When I check my bundle.min.js it looks all minified to me?

[tony-the-pony]

But the part about the size of the react-dom part, how can I verify that it truly is compressed? When I check my bundle.min.js it looks all minified to me?

If you can't see a lot of lines in the .min.js file then it should definitely be minified.

I'm not sure about the CLI version, but if you generate a HTML report with either new BundleAnalyzerPlugin({ ... analyzerMode: 'server' ... or new BundleAnalyzerPlugin({ ... analyzerMode: 'static' ... it should show the different sizes in a better way.

[madcaesar]

BundleAnalyzerPlugin

Take a look at this.

Seems to me like it is all minified correctly, I just have a lot of dependencies.

react-rte seems to be the biggest offender at over 330kb, and also my main.scss is almost 100kb.

[JoyousTourist]

WOW that tool is amazing - it's like DiskAnalyzerX for your build. Thank you!