Topic: How to make bundle size smaller by not importing all Fontawesome components?
Hi guys,
How do I get my bundle size smaller by only including specific FA icons with the component and other ones?
Expected behavior
Production bundle should only contain specific imported Fontawesome icons.
Actual behavior
Whole library files are included that causes a huge bundle size.
Resources (screenshots, code snippets etc.)
-rw-r--r-- 1 wimo staff 218 Jun 5 14:07 arrow_left.11911410.svg
-rw-r--r-- 1 wimo staff 217 Jun 5 14:07 arrow_right.8ef6a08c.svg
-rw-r--r-- 1 wimo staff 1554 Jun 5 14:07 default-skin.b257fa9c.svg
-rw-r--r-- 1 wimo staff 715890 Jun 5 14:07 fa-brands-400.0cb5a5c0.svg
-rw-r--r-- 1 wimo staff 132728 Jun 5 14:07 fa-brands-400.13685372.ttf
-rw-r--r-- 1 wimo staff 76612 Jun 5 14:07 fa-brands-400.a06da7f0.woff2
-rw-r--r-- 1 wimo staff 133034 Jun 5 14:07 fa-brands-400.c1868c95.eot
-rw-r--r-- 1 wimo staff 89824 Jun 5 14:07 fa-brands-400.ec3cfdde.woff
-rw-r--r-- 1 wimo staff 34390 Jun 5 14:07 fa-regular-400.261d666b.eot
-rw-r--r-- 1 wimo staff 144322 Jun 5 14:07 fa-regular-400.89ffa3ab.svg
-rw-r--r-- 1 wimo staff 13584 Jun 5 14:07 fa-regular-400.c20b5b73.woff2
-rw-r--r-- 1 wimo staff 34092 Jun 5 14:07 fa-regular-400.db78b935.ttf
-rw-r--r-- 1 wimo staff 16800 Jun 5 14:07 fa-regular-400.f89ea91e.woff
-rw-r--r-- 1 wimo staff 202616 Jun 5 14:07 fa-solid-900.1ab236ed.ttf
-rw-r--r-- 1 wimo staff 202902 Jun 5 14:07 fa-solid-900.a0369ea5.eot
-rw-r--r-- 1 wimo staff 79444 Jun 5 14:07 fa-solid-900.b15db15f.woff2
-rw-r--r-- 1 wimo staff 103300 Jun 5 14:07 fa-solid-900.bea989e8.woff
-rw-r--r-- 1 wimo staff 897426 Jun 5 14:07 fa-solid-900.ec763292.svg
-rw-r--r-- 1 wimo staff 12665 Jun 5 14:07 logo.0fe6c409.png
-rw-r--r-- 1 wimo staff 85203 Jun 5 14:07 preloader.8e46180e.gif
Thank you, Kuba.
I will use the size as it is now, but it will help if it can, in future, only include used icons to make bundle smaller and faster to load.
Regards, Wim
Jakub Chmura staff premium commented 5 years ago
Sure, we will discuss this topic and think about how it could be implemented.
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.26.1
- Device: Macbook Pro
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No
Wim Olivier commented 5 years ago
I am only using maybe 10 icons at the moment, and don't want all icons to be included. I am using the MDBIcon component.
Jakub Chmura staff premium commented 5 years ago
Hi @Wim Olivier,
We do not recommend removing the
Font Awesomeicons that you have not used. The package size with all dependencies is still not large compared to competitor's packages. If you want to delete or change packed production files, you do so at your own risk.For my part, I will add a task on the table of new functionalities so that the React team analyzes the possibility of introducing this type of improvement to the package.
Best, Kuba