Vite中变量动态命名导入无法触发Tree Shaking问题

我需要在应用中展示社交媒体链接，每个链接对应一个oh-vue-icons图标。由于全量导入图标库体积过大，希望仅导入链接定义中指定的图标，但目前动态导入的写法导致Tree Shaking失效，最终打包了整个图标库。

现有代码 #

/src/data/social-links.js（定义链接与对应图标）

export default [
  {
    name: "LinkedIn",
    url: "...",
    iconName: "CoLinkedinIn"
  },
  {
    name: "GitHub",
    url: "...",
    iconName: "CoGithub"
  }
]

SocialLinks.vue组件代码

import socialLinks from "/src/data/social-links.js"
import { ref, onBeforeMount } from "vue"
import { addIcons } from "oh-vue-icons"

const iconsLoaded = ref(false)

onBeforeMount(() => {
  importIcons()
})

const importIcons = async () => {
  const iconNames = socialLinks.map(link => link.iconName)

  await import("oh-vue-icons/icons").then(module => {
    const iconModules = iconNames.map(name => module[name])
    addIcons(...iconModules)
    iconsLoaded.value = true
  })
}

我还尝试过另一种动态导入写法，但问题依旧：

const importIcons = async () => {
  Promise.all(
    socialLinks.map(async (link) => {
      const { [link.iconName]: iconModule } = await import("oh-vue-icons/icons")
      return iconModule
    })
  ).then((modules) => {
    addIcons(...modules)
    iconsLoaded.value = true
  })
}

前端功能正常，但Tree Shaking未生效。推测是运行时代码无法被构建工具静态分析导致的，请问能否通过预构建步骤解决？

技术栈版本：

"vue": "^3.4.29"
"vite": "^5.3.1"

解决方案 #

核心原因

动态导入整个oh-vue-icons/icons模块时，Vite无法通过静态分析确定你实际需要哪些图标导出，因此只能打包整个模块，导致Tree Shaking失效。要实现按需打包，必须让构建工具能静态识别导入的图标。

方案1：静态导入指定图标（简单直接）

直接在组件中明确导入所需图标，这种方式能让Tree Shaking完全生效，但需要手动同步social-links.js中的图标列表：

import socialLinks from "/src/data/social-links.js"
import { ref, onBeforeMount } from "vue"
import { addIcons } from "oh-vue-icons"
// 静态导入需要的图标
import { CoLinkedinIn, CoGithub } from "oh-vue-icons/icons"

const iconsLoaded = ref(true)

onBeforeMount(() => {
  addIcons(CoLinkedinIn, CoGithub)
})

方案2：预构建脚本自动生成导入代码（灵活可扩展）

如果social-links.js中的图标会频繁变动，可以写一个Node脚本，提前提取图标名称并生成静态导入代码，兼顾灵活性和Tree Shaking效果：

1. 创建预构建脚本：在项目根目录新建scripts/generate-icons-import.js

const fs = require('fs');
const path = require('path');

// 读取social-links配置
const socialLinks = require('../src/data/social-links.js');
const iconNames = socialLinks.map(link => link.iconName);

// 生成静态导入代码
const importCode = `import { ${iconNames.join(', ')} } from "oh-vue-icons/icons";
import { addIcons } from "oh-vue-icons";

export const loadIcons = () => {
  addIcons(${iconNames.join(', ')});
};
`;

// 写入到工具文件
fs.writeFileSync(path.resolve(__dirname, '../src/utils/icons-import.js'), importCode);

2. 更新package.json脚本：在构建/开发前自动执行脚本

"scripts": {
  "generate-icons": "node scripts/generate-icons-import.js",
  "dev": "npm run generate-icons && vite",
  "build": "npm run generate-icons && vite build"
}

3. 在组件中使用生成的代码

import socialLinks from "/src/data/social-links.js"
import { ref, onBeforeMount } from "vue"
import { loadIcons } from "@/utils/icons-import.js"

const iconsLoaded = ref(false)

onBeforeMount(() => {
  loadIcons();
  iconsLoaded.value = true;
})

这样每次启动开发服务或构建时，都会自动根据social-links.js生成对应图标静态导入代码，既不需要手动同步，又能让Tree Shaking正常工作。

内容的提问来源于stack exchange，提问作者Hunter