React-styleguidist: Why is production bundle.js so big?

[naltatis]

I've noticed that the production bundle.js for the basic example is ~2,5mb. This seems quite huge to me. The bundle.js from the demo at http://react-styleguidist.js.org/ is _only_ 1mb. Is the deployed example maybe build with an older version?

What does make the bundle so big? From my understanding it should only contain react, codemirror, the components and a little bit of glue code. Am I missing something here?

Because react-styleguidist encapsulates webpack I was not able to analyse it with tools like webpack-bundle-size-analyzer.

I really would like help on this topic.

[sapegin]

It’s 2.4 MB _ungzipped_:

The main contributor to that size I thinks is CodeMirror:

❯ gz node_modules/codemirror/lib/codemirror.js
Original: 353548 bytes
Gzipped: 94776 bytes (26.81%)

But we may misconfigure something, so help is really appreciated. I think you can hardcode statistics generation in make-webpack-config.js.

[naltatis]

You are right. Firefox tells me the wrong file size when I force-reload. Not quite sure why that is.

I'll have a deeper look into the webpack stats ...
Thanks for the quick feedback!

[naltatis]

Seems like babel-standalone and lodash are the biggest dependencies.

⇒ webpack-bundle-size-analyzer stats.json
babel-standalone: 2.08 MB (47.7%)
  <self>: 2.08 MB (100%)
react-styleguidist: 766.31 KB (17.2%)
  lodash: 633.61 KB (82.7%)
    <self>: 633.61 KB (100%)
  babel-runtime: 45.78 KB (5.97%)
    core-js: 39.64 KB (86.6%)
      <self>: 39.64 KB (100%)
    <self>: 6.14 KB (13.4%)
  <self>: 86.93 KB (11.3%)
react: 581.8 KB (13.0%)
  <self>: 581.8 KB (100%)
codemirror: 578.27 KB (13.0%)
  <self>: 578.27 KB (100%)
markdown-react-js: 143.73 KB (3.22%)
  markdown-it: 135.32 KB (94.1%)
    <self>: 135.32 KB (100%)
  <self>: 8.41 KB (5.85%)
lodash: 68.53 KB (1.54%)
  <self>: 68.53 KB (100%)
entities: 34.67 KB (0.777%)
  <self>: 34.67 KB (100%)
fbjs: 32.32 KB (0.725%)
  <self>: 32.32 KB (100%)
linkify-it: 21.83 KB (0.489%)
  <self>: 21.83 KB (100%)
mdurl: 15.38 KB (0.345%)
  <self>: 15.38 KB (100%)

I was able to generate the stats.json by uncommenting this line:
https://github.com/sapegin/react-styleguidist/blob/master/src/build.js#L7

[sapegin]

markdown-react-js is two times bigger that lodash but babel-standalone is huuuuuge.

[naltatis]

I was looking at react-styleguidist: lodash 633.61 KB

[mik01aj]

Oh, this one does look weird. Maybe we have many copies of lodash?

[sapegin]

Yeah, this is weird because the full unminified build of lodash is smaller:

❯ gz lodash.js
Original: 504040 bytes
Gzipped: 89746 bytes (17.81%)

[sapegin]

Looks like we’re including it all:

src/rsg-components/Editor/Editor.js
5:import _ from 'lodash';
7:import debounce from 'lodash/debounce';

[sapegin]

Doesn’t help much:

Before:

Original: 2467270 bytes
Gzipped: 607692 bytes (24.63%)

After:

Original: 2337612 bytes
Gzipped: 577241 bytes (24.69%)

[naltatis]

What is babel-standalone used for?

[sapegin]

To transpile ES6 in CodeMirror editor.

[naltatis]

Irks. Then i really would vote for making code editing optional or a lazy dependency. #86

[sapegin]

The issue you mentioned isn’t about making editing optional but about hiding the editor by default. But extraction of CodeMirror and babel-standalone into a separate bundle with lazy loading is also very good feature.

[ndelangen]

With webpack 2 you can do:

System.import('xyz').then(xyzModule => {
  // use module
});

And it will code-split automatically. I've done so, with packages without dependencies, but the result was a success.

[mik01aj]

@sapegin and @naltatis, good idea with code splitting.

But on the other hand, I think that #86 still has far bigger performance impact than this.

[naltatis]

I think we have to tacke both.

In dev-Mode the bundle is ~13mb. Firefox on my one year old 15" MacBook Pro needs ~10s to initially load the page with just the sample components. In Chrome it _only_ takes 3s, but here is a huge potential to improve developer experience.

[sapegin]

@naltatis Any performance / UX / DX improvements are _very_ appreciated, even the smallest.

:shipit: 🚀

[sapegin]

I’m closing this for now. Feel free to submit a pull request if you can fix some of these issues.