不是吧？强大的 vite 居然不支持内 SVG 转 Base64 内嵌？

**不是吧？强大的 Vite 居然不支持内SVG转Base64内嵌？**

作为一个前端开发者，我一直以来都非常喜欢使用 Vite 这个构建工具。它的速度快、配置简单、插件丰富，简直是开发者的福音。但是，在最近的一个项目中，我遇到了一个奇怪的问题：Vite 不支持内SVG转Base64内嵌。

**什么是内SVG转Base64内嵌？**

内SVG转Base64内嵌是一种常见的优化技术，用于减少 SVG 文件的大小。通过将 SVG 内容转换为 Base64 编码，然后在 HTML 中使用 data URI 方式内嵌，这样可以避免额外的 HTTP 请求，从而提高页面加载速度。

**为什么 Vite 不支持内SVG转Base64内嵌？**

经过调查，我发现这是因为 Vite 的配置文件中没有开启 SVG 转 Base64 的功能。Vite 的默认配置是关闭了这个功能的。

**如何解决这个问题？**

好在解决这个问题非常简单，只需要在 Vite 的配置文件中添加一个配置项即可：

javascript// vite.config.jsmodule.exports = {
 // ...
 optimizeDeps: {
 exclude: ['svg-sprite-loader'],
 },
};

**但是，这个方法并不是最优解。**

虽然上面的配置可以解决问题，但是它会导致 Vite 忽略所有的 SVG 文件，包括那些需要转换为 Base64 的 SVG 文件。这意味着，如果你有一个大型项目，包含了很多 SVG 文件，那么这个配置可能会导致性能下降。

**更好的方法是使用 svg-sprite-loader 插件。**

svg-sprite-loader 是一个非常强大的插件，可以帮助我们优化 SVG 文件的大小。它可以将多个 SVG 文件合并成一个 sprite 图片，然后使用 Base64 编码内嵌到 HTML 中。

首先，我们需要安装这个插件：

bashnpm install svg-sprite-loader --save-dev

然后，我们需要在 Vite 的配置文件中添加以下配置项：

javascript// vite.config.jsmodule.exports = {
 // ...
 plugins: [
 'svg-sprite-loader',
 ],
};

**如何使用 svg-sprite-loader 插件？**

使用 svg-sprite-loader 插件非常简单，只需要在你的 SVG 文件中添加一个特定的类名即可：

html<!-- icon.svg -->
<svg class="icon" viewBox="0010241024">
 <!-- 内容 -->
</svg>

然后，在你的 HTML 文件中使用这个类名即可：

html<!-- index.html -->
<div class="icon"></div>

**总结**

在本文中，我们讨论了 Vite 不支持内SVG转Base64内嵌的问题，并提供了两个解决方案：一个是修改 Vite 的配置文件，另一个是使用 svg-sprite-loader 插件。虽然第一个方法简单，但它可能会导致性能下降；第二个方法更为优雅，可以帮助我们优化 SVG 文件的大小。