Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add webpack-bundle-analyzer to help with understanding build output #106

Closed
rileyhilliard opened this issue Feb 21, 2019 · 0 comments
Closed

Comments

@rileyhilliard
Copy link
Contributor

rileyhilliard commented Feb 21, 2019

Is your feature request related to a problem? Please describe.
The output of react-digraph is massive, far larger than it needs to be. There are some really easy things that can be done to cut down the size and boost performance.

Describe the solution you'd like
The first step in understanding the bloat of an application and where fat can be trimmed is by visualizing the problem. webpack-bundle-analyzer allows you to see what is included in your final prod build so you can start identifying modules that are heavier than you expect.

Describe alternatives you've considered
None

Additional context
screen shot 2019-02-21 at 5 00 03 am

The screenshot above is what you're able to visualize within this repo when using webpack-bundle-analyzer. One of the first things that stand out is the use of react-icons. This one module alone accounts for over 50% of the entire asset size of the react-digraph production build. I also noticed that this module is only used for the expand icon, so one single icon is costing 374k gzipped.
I've already done the work in adding webpack-bundle-analyzer to this repo, I am only opening this issue so I can make a PR to it.

rileyhilliard added a commit to rileyhilliard/react-digraph that referenced this issue Feb 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant