How to reduce FontAwesome bundle size?

Question

During my latest attempt to make my page load faster, I noticed that FortAwesome makes up 1.08MB during my page load:

The module you're looking at is my SharedModule which adds icons etc in the constructor of the module:

// ..
import {library} from '@fortawesome/fontawesome-svg-core';
import {faCoffee, fas} from '@fortawesome/free-solid-svg-icons';
import {faAndroid, faAppStoreIos, faFacebook, faInstagram, faSlack} from '@fortawesome/free-brands-svg-icons';
import {faLinkedin} from '@fortawesome/free-brands-svg-icons/faLinkedin';
// ..
@NgModule({
  declarations: [
    ExportModules
  ],
  imports: [
    CommonModule,
    RouterModule,
    MaterialModules,
    FontAwesomeModule,
  ],
  providers: [
  ],
  exports: [
    ExportModules
  ],
  entryComponents: [
  ]
})
export class SharedModule {

  constructor() {
    library.add(faCoffee);
    library.add(fas, faInstagram);
    library.add(fas, faFacebook);
    library.add(fas, faLinkedin);
    library.add(fas, faSlack);
    library.add(fas, faAndroid);
    library.add(fas, faAppStoreIos);
  }

}

Since all I am loading here are a few SVGs I would like to exlude the rest if possible.

Is there a way to reduce FortAwesomes bundle size?

Answer 1

Your problem is fas you're including all solid icons, and after you included them multiple times in the library. you need to delete fas.

the way you call linkendin is the most optimized way to call the icons, apply this for all the icons. Your code with the proposed changes:

// ..
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee';
import { faAndroid } from '@fortawesome/free-brands-svg-icons/faAndroid';
import { faAppStoreIos } from '@fortawesome/free-brands-svg-icons/faAppStoreIos';
import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
import { faSlack } from '@fortawesome/free-brands-svg-icons/faSlack';
import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
// ..
@NgModule({
  declarations: [
    ExportModules
  ],
  imports: [
    CommonModule,
    RouterModule,
    MaterialModules,
    FontAwesomeModule,
  ],
  providers: [
  ],
  exports: [
    ExportModules
  ],
  entryComponents: [
  ]
})
export class SharedModule {

  constructor() {
    library.add(
      faCoffee,
      faInstagram,
      faFacebook,
      faLinkedin,
      faSlack,
      faAndroid,
      faAppStoreIos
    );
  }

}

Answer 2

Tree shaking is an option you can try. More details can be found here.