如何配置Vite.js将SVG图标NPM依赖预打包为单个模块？

问题背景 #

Vite的依赖预打包功能会将多模块的ESM依赖合并为单个模块以减少请求，但使用vite-plugin-svgr将包含近千个SVG的NPM库转为React组件时，每个SVG仍会触发单独请求，配置optimizeDeps.include: ['@myorg/svg-icons/**/*.svg']并未生效，导致网络性能下降。

核心原因 #

Vite默认仅对JS/TS类模块进行预打包，SVG属于非JS资源，且vite-plugin-svgr的转换逻辑默认在构建阶段执行，预打包阶段无法识别通配符匹配的SVG文件，因此原有配置不生效。

可行解决方案 #

方案1：为图标库添加统一导出入口（推荐） #

在@myorg/svg-icons库的根目录创建一个统一的入口文件（如index.js/index.ts），将所有SVG组件集中导出：

// @myorg/svg-icons/index.js
export { default as IconUser } from './icons/user.svg?react';
export { default as IconHome } from './icons/home.svg?react';
// 遍历所有SVG并导出，可通过脚本自动生成避免手动维护

项目中导入图标时使用统一入口：

import { IconUser, IconHome } from '@myorg/svg-icons';

此时Vite会自动将这个JS入口作为预打包目标，合并为单个模块，彻底解决多请求问题。

方案2：配置Esbuild在预打包阶段处理SVG #

修改Vite配置，让预打包阶段的Esbuild能够识别并通过SVGR转换SVG文件，同时调整optimizeDeps.include为库的根路径：

export default defineConfig({
  plugins: [svgr()],
  optimizeDeps: {
    include: ['@myorg/svg-icons'],
    esbuildOptions: {
      plugins: [
        {
          name: 'svgr-esbuild',
          setup(build) {
            build.onLoad({ filter: /\.svg$/ }, async (args) => {
              const fs = require('fs');
              const svgr = require('@svgr/core').default;
              const svgContent = fs.readFileSync(args.path, 'utf8');
              // 可根据需求配置SVGR选项，比如开启icon模式
              const jsCode = await svgr(svgContent, { icon: true }, { componentName: 'ReactComponent' });
              return { contents: jsCode, loader: 'js' };
            });
          },
        },
      ],
    },
  },
});

注意：需提前安装@svgr/core依赖，确保Esbuild能完成SVG到React组件的转换。

方案3：生产构建时通过Rollup合并图标模块 #

若无需修改图标库或预打包逻辑，可在生产构建阶段通过Rollup的代码分割配置，将所有SVG图标合并为单个chunk：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'svg-icons': ['@myorg/svg-icons/**/*.svg'],
        },
      },
    },
  },
});

该方案仅在生产构建时生效，开发环境仍会保留多请求，但能解决生产环境的网络性能问题。

注意事项 #

• 开发环境下Vite为了保证热更新效率，可能不会完全合并所有模块，生产环境会自动完成合并优化。
• 方案1中可编写Node脚本自动遍历SVG目录生成入口文件，例如：

// scripts/generate-icon-export.js
const fs = require('fs');
const path = require('path');

const iconsDir = path.resolve(__dirname, '../icons');
const exportLines = [];

fs.readdirSync(iconsDir).forEach(file => {
  if (file.endsWith('.svg')) {
    const iconName = `Icon${file.replace(/\.svg$/, '').replace(/-([a-z])/g, (_, c) => c.toUpperCase())}`;
    exportLines.push(`export { default as ${iconName} } from './icons/${file}?react';`);
  }
});

fs.writeFileSync(path.resolve(__dirname, '../index.js'), exportLines.join('\n'));

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