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

摇树是您可以尝试的选择。可以在here中找到更多详细信息。

Answer 3

我的用例略有不同，但我的解决方案可能对这个问题的读者有用。我正在使用 Next.js 并尝试减小 'First load JS shared by all' 包的大小。

和您一样，我添加了我的应用程序在应用程序启动期间可能使用的每个图标，但是并不是每个页面都需要所有图标...所以我创建了一个按需加载程序（适合您的用例）：

>

lib/icon-loader.js

import { library } from '@fortawesome/fontawesome-svg-core';

// Abbreviated for demo purposes
import {
    faUser,
    faUserCircle,
    faWallet,
} from '@fortawesome/free-solid-svg-icons';

const loadedIcons = [];
const iconMap = {
    faUser,
    faUserCircle,
    faWallet,
};

export const loadIcon = (name) => {
    if(!loadedIcons.includes(name)) {
        if(!Object.keys(iconMap).includes(name)) {
            console.error(`Tried to load unsupported icon ${name}`);
            return;
        }

        library.add(iconMap[name]);
        loadedIcons.push(name);
    }
};

components/OnDemandIcon.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { loadIcon } from 'lib/icon-loader';

const OnDemandIcon = ({
    iconName,
    ...faProps
}) => {
    loadIcon(iconName);

    return <FontAwesomeIcon {...faProps} />;
};

export { OnDemandIcon };

现在我不再直接使用 FontAwesomeIcon，而是使用 OnDemandIcon，并相应地传递额外的 iconName 属性；例如代替

<FontAwesomeIcon color={white} icon="bug" size="4x" />

我现在用

<OnDemandIcon color={white} icon="bug" iconName="faBug" size="4x" />

这减少了共享包的大小，但根据图标库的使用情况增加了单个页面。

如何减小FortAwesome捆绑包的尺寸？

3 个答案: