Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: How to make bundle size smaller by not importing all Fontawesome components?

Wim Olivier free asked 4 years ago

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

Wim Olivier free commented 4 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 commented 4 years ago

Hi @Wim Olivier,

We do not recommend removing the Font Awesome icons 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

Wim Olivier free answered 4 years ago

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 commented 4 years ago

Sure, we will discuss this topic and think about how it could be implemented.

Best, Kuba
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: 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
Tags
mdbicon bundle yarn-build
About author
Wim Olivier
37Support score
5Questions 1Answers 0Snippets