Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why is production bundle.js so big?

See original GitHub issue

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.

Issue Analytics

State:
Created 7 years ago
Comments:18 (9 by maintainers)

Top GitHub Comments

4reactions

sapegincommented, Aug 18, 2016

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.

1reaction

naltatiscommented, Apr 29, 2016

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

Top Results From Across the Web

ReactJS - What makes bundle.js size big - Stack Overflow

The bigger the block, bigger is the size. node_modules=10 MB each visible small chunks are almost = 1MB. My webpack config looks like...

5 Methods to Reduce JavaScript Bundle Size - Bits and Pieces

Running your project in production mode reduces the bundle sizes compared to the development mode. Webpack provides a separate flag ( -p )...

Small Bundles, Fast Pages: What To Do With Too Much ...

Large amounts of JavaScript negatively affect site speed in two distinct phases: During page load: big bundles take longer to download. During ...

3 ways to reduce webpack bundle size - Jakob Lind

With webpack, you can split your bundle into many smaller bundles, and then the browser can automatically fetch the bundles needed asynchronously. This...

Slimming down your bundle size - LogRocket Blog

A large part of frontend loading time is spent on executing JavaScript files as well as rendering the page. But a critical part...