Umi.js 项目中动态加载 Ant Design Icon 的注意事项

问题背景

在使用 Umi.js 框架开发项目时，开发者经常会遇到需要动态加载 Ant Design 图标的情况。一个常见的实现方式是使用动态导入语法 import() 来按需加载图标组件。然而，当项目中启用了 Mako 构建工具后，这种实现方式可能会导致构建失败，报出 "Module not found: Can't resolve 'dumi'" 的错误。

问题分析

这个问题的根源在于 Mako 构建工具处理动态导入的方式。当代码中使用 import(@ant-design/icons/${template}) 这样的动态导入语法时，Mako 会尝试解析 @ant-design/icons/ 目录下的所有文件，包括该包中的 .umirc.ts 配置文件。

Ant Design Icons 包中包含了一个用于文档的 .umirc.ts 文件，这个文件引用了 dumi（一个文档工具）。当 Mako 尝试解析这个配置文件时，由于项目中没有安装 dumi 依赖，就会抛出模块未找到的错误。

解决方案

1. 避免直接动态导入整个图标包

最直接的解决方案是改变动态加载图标的方式。可以考虑以下几种替代方案：

• 预定义图标映射表：创建一个将图标名称映射到具体组件的对象，避免使用动态导入语法。

const iconMap = {
  home: HomeOutlined,
  user: UserOutlined,
  // 其他图标映射...
};

const Icon = iconMap[iconName];

• 使用静态导入：如果图标数量有限，可以直接静态导入所有可能用到的图标。

2. 使用更精确的动态导入路径

如果必须使用动态导入，可以尝试更精确地指定路径，避免匹配到不必要的文件：

const Icon = lazy(() => import(`@ant-design/icons/es/icons/${_route.icon}`));

3. 配置 Mako 忽略特定文件

在 Umi 配置中，可以尝试配置 Mako 忽略特定的文件或目录：

// .umirc.ts 或 config/config.ts
export default {
  mako: {
    exclude: [/node_modules\/@ant-design\/icons\/\.umirc\.ts/]
  }
}

最佳实践建议

1. 图标管理策略：在项目中建立统一的图标管理机制，避免分散的动态导入。

2. 性能考量：对于大量使用的图标，考虑使用静态导入或预加载，减少运行时开销。

3. 构建工具兼容性：在使用新型构建工具（如 Mako）时，注意其对动态导入语法的处理方式可能与传统工具不同。

4. 错误处理：为动态加载的组件添加适当的错误边界和加载状态处理。

总结

在 Umi.js 项目中使用 Ant Design 图标时，开发者需要注意动态导入的实现方式与构建工具的兼容性。通过采用更精确的导入路径或改变加载策略，可以有效避免构建错误，同时保持代码的整洁和可维护性。理解构建工具的工作原理有助于开发者做出更合理的技术选型和实现方案。