Rollup用url插件引入字体图标致包过大，寻求合理引入方案

问题根源 #

• 设limit: Infinity时，所有字体、SVG都会被转成Base64嵌入代码，直接导致包体积暴涨到600KB。
• 移除该配置后，Rollup会把超过默认阈值（通常8KB）的资源生成单独文件，但因为资源路径未正确配置，导致使用库时找不到这些文件，图标加载失败。

替代方案 #

方案1：正确配置资源输出路径与publicPath #

调整rollup-plugin-url的配置，指定资源输出目录和访问路径，确保打包后资源能被正确加载：

url({
  include: [
    '**/*.woff',
    '**/*.woff2',
    '**/*.eot',
    '**/*.ttf',
    '**/*.svg',
  ],
  // 超过8KB的资源生成单独文件，小于的转Base64（可按需调整阈值）
  limit: 8192,
  // 指定资源输出到dist/assets目录
  destDir: 'dist/assets',
  // 设置资源的相对访问路径，确保使用库时能正确找到资源
  publicPath: './assets/',
})

同时在package.json的files字段中加入dist/assets，确保发布npm包时资源文件会被一同上传。

方案2：将SVG图标转为React组件（推荐） #

用rollup-plugin-svg替代url插件处理SVG，把Iconmoon的SVG直接转成React组件，彻底避免资源路径问题：

1. 安装插件：

npm install rollup-plugin-svg --save-dev

2. 更新Rollup配置：

import svg from 'rollup-plugin-svg';

export default {
  // ...其他配置
  plugins: [
    // 替换原url插件中的SVG处理
    svg({
      react: true, // 将SVG转为React组件
      svgo: true, // 开启SVG压缩
    }),
    // 保留url插件处理字体文件
    url({
      include: [
        '**/*.woff',
        '**/*.woff2',
        '**/*.eot',
        '**/*.ttf',
      ],
      limit: 8192,
      destDir: 'dist/assets',
      publicPath: './assets/',
    }),
  ],
};

3. 组件中直接使用SVG：

import MenuIcon from './icons/menu.svg';

const MyComponent = () => <MenuIcon width={24} height={24} />;

这种方式既解决了路径问题，还支持按需引入图标，进一步压缩包体积。

方案3：精简Iconmoon字体图标 #

如果用Iconmoon的字体图标方案，避免全量引入：

• 导出Iconmoon图标时只勾选项目需要的，生成精简的字体文件和CSS。
• 把生成的字体文件放到项目目录，按方案1的url配置打包，确保CSS中字体路径与publicPath匹配。

额外优化 #

• 用svgo工具批量压缩SVG文件，进一步减小资源体积。
• 字体文件优先使用woff2格式，体积更小且兼容性达标。

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