2

GitHub 上的自述文件显示了如何从不同的包中导入图标。例如：

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faArrowAltRight } from '@fortawesome/pro-light-svg-icons';
library.add(faCoffee, faArrowAltRight);

但是没有示例如何从不同样式中导入相同的图标。我是这样做的：

import { faHome as falHome } from "@fortawesome/pro-light-svg-icons";
import { faHome } from "@fortawesome/pro-regular-svg-icons";
library.add(falHome, faHome);

但这并不漂亮，因为我需要as针对所有重复但样式不同的图标进行具体说明。

所以，我想出了一个导入整个库的想法，但只添加了一些图标：

import * as fal from "@fortawesome/pro-light-svg-icons";
import * as far from "@fortawesome/pro-regular-svg-icons";
library.add(fal.faHome, far.faHome);

我不确定在这种情况下是否可以期待更大的最终尺寸或任何其他性能问题。
不建议添加整个库（来自 GitHub 自述文件）：

您还可以导入整个图标样式。但小心点！无论您导入什么，最终都可能使您的最终捆绑包中出现您不使用的图标。

library.add(fal, far);

但我没有添加整个库，只是导入。

我做了一些测试并比较了文件大小（main.js）和构建时间。它们大致相同（2280.098 kBvs2280,988 kB和5:19vs 5:15）。

但是我不是 TypeScript 或 Angular 方面的专家，我想知道这是否应该工作（相同的大小和生产构建时间）或者它只是偶然相同并且这可能会在未来发生变化？
我的基本直觉告诉我它不应该是一样的，因为我正在导入整个库。但是我已经读过一些关于 tree-shaking 和导入整个库的内容应该不是问题，因为 tree-shaking 会忽略所有未使用的图标（导入）。这是真的？

4

0 回答 0