在 vue3 + vite 中延迟加载 fontawesome 图标在 DEV 中不起作用

Question

在我的 vue3+vite 项目中，我使用的是官方的 fontawesome vue3 package（参见 use with vue ）。
为了启用 tree-shaking，您需要使用library.add预先静态加载必要的图标（或可能全部）。 参见例如以下App.vue

<script setup>
import { ref, computed } from "vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { definition } from "@fortawesome/free-solid-svg-icons/faTruck";
library.add(definition);

const icon = ref("");
const showIcon = () => { icon.value = `fa-solid fa-truck`; };
</script>

<template>
  <button @click="showIcon">Show Truck Icon</button>
  <div v-if="icon">
    <font-awesome-icon :icon="icon" />
  </div>
</template>

在这里，我们静态加载卡车图标，当您单击按钮时，图标就会显示出来。

我试图做的是按需加载图标（在本例中，仅在单击按钮时），使用以下代码：

<script setup>
import { ref, computed } from "vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

const modules = import.meta.glob(
  "../node_modules/@fortawesome/free-solid-svg-icons/faTruck.js",
  { eager: false, import: "definition" }
);

const icon = ref("");
const showIcon = () => {
  Object.values(modules)[0]().then((elem) => {
    library.add(elem);
    icon.value = `fa-solid fa-truck`;
  });
};
</script>

<template>
  <button @click="showIcon">Show Truck Icon</button>
  <div v-if="icon">
    <font-awesome-icon :icon="icon" />
  </div>
</template>

但这在“开发”中不起作用（ npm run dev ）：

• 它调用 http://localhost:5173/node_modules/@fortawesome/free-solid-svg-icons/faTruck.js
• 然后引发错误： Uncaught (in promise) ReferenceError: exports is not defined

虽然它在构建包时工作正常（ npm run build然后例如使用 http-server 服务 dist 文件夹）

我怀疑问题与以下事实有关：在开发模式下， faTruck.js模块是“按原样”使用的，而它是在构建阶段进行转换的。

有解决办法吗？

笔记：

该示例仅包含“卡车”，因为过于简单，但实际上应该加载任何图标； 即import.meta.glob中的实际路径应该是../node_modules/@fortawesome/free-solid-svg-icons/fa*.js

---

重现问题的完整步骤：

npm create vue@3 # accepts all defaults
cd vue-project
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome
# replace src/App.vue with the one indicated above

# run in dev with
npm run dev

# or build for prod and then expose using http-server
npm run build
npx http-server dist

Answer 1

说明

根据 Vite 预捆绑文档：

Vite 的开发人员将所有代码作为原生 ESM 提供服务。 因此，Vite 必须先将作为 CommonJS 或 UMD 提供的依赖项转换为 ESM

但是当你使用带动态变量的 glob import 时，你的模块将不会被预捆绑。 由于@fortawesome/free-solid-svg-icons/faTruck.js是一个 CommonJS 文件，它不能直接在 ESM 中使用。 你是对的，Vite 确实在生产构建中转换了模块，所以它在生产中运行良好。

您可能会考虑optimizeDeps.include选项，但不幸的是，它在这种情况下没有帮助。 即使您将模块添加到include列表中，Vite 也会预先捆绑您的模块，但它不会使用该预先捆绑的文件进行动态导入。 它仍然使用node_modules/@fortawesome/free-solid-svg-icons/文件夹中的文件。

恐怕没有直接解决您的问题的方法。 看到这个问题

解决方法

只是让它在开发和生产上以不同的方式工作。

const showIcon = async () => {
  let x = 'faTruck'
  let definition
  if (import.meta.env.PROD) {
    const iconModule = await import(
      `../node_modules/@fortawesome/free-solid-svg-icons/${x}.js`
    )
    definition = iconModule.definition
  } else {
    const iconModule = await import(`@fortawesome/free-solid-svg-icons`)
    definition = iconModule[x]
  }

  library.add(definition)
  icon.value = `fa-solid fa-truck`
}

使用此代码，您仍然可以在生产环境中享受延迟加载的好处，并可以顺利地运行开发服务器

另一种方法

像这样硬编码您的导入列表：

const showIcon = async (iconName) => {
  const listImport = {
    faTruck: () => import(`@fortawesome/free-solid-svg-icons/faTruck`),
    faWarning: () => import(`@fortawesome/free-solid-svg-icons/faWarning`),
  }

  const iconModule = await listImport[iconName]()
  console.log('iconModule', iconModule)
  library.add(iconModule.definition)
}

但我敢打赌你的列表中有数百个图标，所以这几乎不是一个选择