typescript 如何减少FontAwesome捆绑包的大小？

amrnrhlw 于 2023-11-20 发布在 TypeScript

关注(0)|答案(2)|浏览(138)

在我最近一次尝试让我的页面加载更快的过程中，我注意到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捆绑包的大小？

typescript

来源：https://stackoverflow.com/questions/57935672/how-to-reduce-fontawesome-bundle-size

2条答案

按热度按时间

juzqafwq1#

你的问题是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
    );
  }

}

字符串

赞(0）回复(0）举报 2023-11-20

zynd9foi2#

以下是官方文档中的重要部分
有两种方法来包含图标。单独或全局。全局方法意味着你不会有优化的捆绑包。
您可能包含了不会被使用并可能影响性能的文件。
在每个文件中单独包含图标，read： 而不仅仅是单独使用FontAwesomeIcon，支持优化的捆绑包。

赞(0）回复(0）举报 2023-11-20