SVG 精灵图在 Qiankun 应用中消失不见？别慌，这有妙招！

2023-09-25 02:33:22

前言

在使用 SVG 精灵图和微前端框架 Qiankun 开发应用时，我遇到了一个令人抓狂的问题：SVG 精灵图在 Qiankun 子应用中诡异地消失了！为了解决这个棘手的难题，我踏上了艰辛的调试之旅。今天，我将分享我一路上的心路历程和最终找到的妙招，希望能帮助同样饱受此困扰的开发者们。

背景介绍

SVG 精灵图是一种将多个 SVG 图标打包成单个文件的技术，可以显著减少 HTTP 请求数量，从而提高页面性能。Qiankun 是一个流行的微前端框架，允许在单页应用中无缝集成多个子应用。

问题

当我在 Qiankun 子应用中使用 SVG 精灵图时，精灵图竟然无影无踪了！在控制台中，我看到如下错误信息：

Failed to load resource: net::ERR_FILE_NOT_FOUND

这表明精灵图文件无法被加载。

调试历程

起初，我怀疑是精灵图文件路径配置错误。反复检查配置后，我确信路径是正确的。接着，我尝试在子应用中直接使用 SVG 图标，却发现它们可以正常显示。这让我更加困惑了，因为精灵图文件明明存在，为什么却无法被加载？

经过一番深挖，我发现了一个关键的细节：在主应用中，精灵图文件是通过 webpack 的 file-loader 加载的，而在子应用中，却使用了 svg-sprite-loader。于是，我决定重点关注 svg-sprite-loader。

解决方案

一番探索后，我找到了一个针对该问题的潜在解决方案。原来，svg-sprite-loader 在处理精灵图时，会默认将精灵图中的图标转换为内联 SVG，并插入到 HTML 中。然而，在 Qiankun 子应用中，由于缺少必要的 webpack 配置，精灵图中的图标无法被正确转换为内联 SVG，从而导致它们无法显示。

为了解决这个问题，我需要在子应用中添加 webpack.config.js 文件，并在其中配置 svg-sprite-loader，确保它使用 @svgo/webpack 插件将精灵图中的图标转换为内联 SVG。配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]'
        }
      }
    ]
  }
};