如何减小 FontAwesome 包的大小？

Question

在我最近一次尝试加快页面加载速度时，我注意到 FortAwesome 在我的页面加载过程中占用了 1.08MB 的空间：

您正在查看的模块是我的

SharedModule

，它在模块的构造函数中添加了图标等：

// ..
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);
  }

}

由于我在这里加载的只是一些 SVG，如果可能的话，我想排除其余部分。

有没有办法减少 FortAwesomes 捆绑包的大小？

Answer 1

您的问题是

fas

您包含了所有实体图标，并且在将它们多次包含在库中之后。您需要删除

fas

。

调用 linkendin 的方式是调用图标的最优化方式，将此应用于所有图标。您的代码以及建议的更改：

// ..
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

这是官方文档

的重要部分

有两种包含图标的方法。个别地，或全球地。全局方法意味着您将不会获得优化的捆绑包。

您可能包含不会使用并可能影响的文件 性能。

单独包含图标，读取：在每个文件中而不是仅使用

FontAwesomeIcon

，支持优化的捆绑包。

Answer 3

有一种方便的方法可以减小 Font Awesome 的大小。访问www.fontcut.com，只需3步即可获得您的自定义字体awesome子集。效率超级高，您将获得缩小的CSS、TTF和WOFF2文件，并且字体文件（不包括css文件）可以压缩至1kb！这项服务对99%的网站都是免费的。