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.
react-icons build optimization
See original GitHub issueHello. We are building our docs page and we have serious issues with the react-icons bundle size.
We are using server side rendering and there is 8 chunks that all have additional 1.8mb bundle size caused just in @patternfly/react-icons. In our project we are using only 5 distinct icons, but the build includes all of them. We have tree shaking enabled but with the way how the icons are exposed it will never mark them as unreachable and it will not exclude them from the build.
We could theoretically mark each icon file in node modules as a side effect but that would mean marking each and every single icon file separately which is not really. It is much simpler to take these 5 svgs and store them in our code base and drop the dependency all together (that is what will do for now).
Here you have a screenshot of bundle sizes of every page created for SSR chunks:
Here is comparision of chunk sizes before (with react-icons) and after (without, moved svgs to code base)
Before
After
You can see that react-icons/dist/ems is in all of the biggest chunks. Each having 1.8 MB. That means that 8 of our SSR pages has over 2.2 MB of size which is not acceptable for SRR and completely defeats the purpose of this technology.
Can you please look at this issue? We are not able to use PF4 efficiently and we have to use different means (like duplicating components and having them in our code base).
Issue Analytics
- State:
- Created 4 years ago
- Comments:35 (35 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Thanks for that context @Hyperkid123 - to catch you up, we’d been working on a few different approaches to getting the imports working using different Babel plugins while keeping the file structure as-is, in order to fix the issue you’re seeing but also not break imports for other users or make large variations to the file structure that’s in place.
A few solutions got us close but not quite there for all components, so we’re looking at other options now and will update you as this progresses - thank you again for the valuable feedback.
@evwilkin I created simplest example possible which has the issue here:
https://github.com/Hyperkid123/pf-core-icons-deps
Steps to reproduce are in the readme