1

用例只是能够使用字符串中的任何FontAwesome 图标，而不必知道这些图标在运行时之前将是什么，而客户端不必下载它们不会使用的图标。

我正在使用angular-fontawesome，使用此处描述的图标库方法：https ://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md

使用此示例语法：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FontAwesomeModule],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    // Add an icon to the library for convenient access in other components
    library.addIcons(faCoffee);
  }
}

因此，理想情况下，可以使faCoffee零件动态化。我知道静态分析可以看到它faCoffee正在被导入，所以它知道捆绑它，并且如果它是一个动态变量，它不可能猜出需要什么导出 - 但那时我只是想知道是否Webpack 或任何其他实用程序中的任何内容都允许将代码包含在构建中，但仅在运行时需要时才下载到客户端。

我已经尝试了一些事情。

我知道这种尝试，但这是 Vue，它甚至可能不起作用：https ://github.com/FortAwesome/vue-fontawesome/issues/170#issuecomment-484544272

我知道您可以放弃 tree-shaking 并使用深度导入，如下所述：https ://fontawesome.com/v5/docs/apis/javascript/tree-shaking#alternative-to-tree-shaking-deep-imports

IE

import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee'

所以我尝试了一种基于https://dmitripavlutin.com/ecmascript-modules-dynamic-import/#1-dynamic-import-of-modules的方法。

const iconModule = from(import('@fortawesome/pro-duotone-svg-icons/faCoffee'));

return iconModule.pipe(map(module => module[fullIconName] as IconDefinition));

这显然有效，然后您可以将 IconDefinition 添加到库中 - 在 switch 语句中，这意味着faCoffee仅在运行时执行代码时才加载包。

但是，如果您尝试做一些动态的事情：

const getPath = (fullIconName: string) => `@fortawesome/pro-duotone-svg-icons/${fullIconName}`;

const iconModule = from(import(getPath(fullIconName)));

return iconModule.pipe(map(module => module[fullIconName] as IconDefinition));

然后很容易理解它不起作用，因为它没有被捆绑。

Error: Cannot find module '@fortawesome/pro-duotone-svg-icons/faCoffee'

事实上，import文档还指出，可能实现的最好方法是导入整个文件，请参阅： https ://webpack.js.org/api/module-methods/#dynamic-expressions-in-import https:// javascript.info/modules-dynamic-imports#the-import-expression

这个答案也表明它可能是不可能的：https ://stackoverflow.com/a/55744858/1061602

但是，这表明使用正确的方法可能是可行的： https ://stackoverflow.com/a/65298694/1061602

我可以看到这里有很多关于动态导入和代码拆分的信息，我已经尝试了一些东西，但我不太清楚我应该做什么。https://webpack.js.org/guides/code-splitting/#dynamic-imports

我可以使用其他一些 FontAwesome 插件来代替。

或者，有人可能已经按照以下方式编写了大量的 switch 语句

switch (iconName) {
    case 'faCoffee':
       /* import faCoffee */
    case 'faSomethingElse':
       /* import faSomethingElse */

这也可以解决问题。

4

0 回答 0