vite 构建正确内联 svg 资源

场景

目前 vite 构建时内联媒体资源的功能有 bug，从 2020 年底就已经存在一个 github issue，感觉短期不太可能解决，于是吾辈决定自行使用插件恢复这个功能。

下面是一个使用 vite 构建的 dist，可以看到其中的 svg 并未被正确内联到代码中，而是单独分割为了一个 bundle，而 jpg 图片则被正确内联。

现有插件

为什么不使用插件 @rollup/plugin-image

• 它没有对 vite 做特殊处理，vite 本身内置插件处理 svg 的时机要早于它，它永远不会有机会处理图片
• 它没有处理 monorepo 项目中其他模块的资源

实现起来并不困难，核心是拦截 .svg 的 load，将之替换为一个 js 文件，其中默认导出 svg dataUri 字符串。

import { createFilter, FilterPattern } from "@rollup/pluginutils";
import { readFile } from "fs-extra";
import svgToMiniDataURI from "mini-svg-data-uri";
import * as path from "path";
import { optimize, OptimizedSvg } from "svgo";
import { Plugin } from "vite";

const defaults = {
  exclude: null,
  include: null,
};

export function svgPatch(opts?: {
  include?: FilterPattern;
  exclude?: FilterPattern;
}): Plugin {
  const options = Object.assign({}, defaults, opts);
  const filter = createFilter(options.include, options.exclude);

  return {
    name: "vite-plugin-svg-patch",
    enforce: "pre",
    resolveId(id: string, importer: string) {
      if (this.meta.watchMode) {
        return null;
      }
      if (id.endsWith(".svg")) {
        return path.resolve(path.dirname(importer), id);
      }
    },
    async load(id) {
      if (this.meta.watchMode) {
        return null;
      }
      if (!filter(id) || !id.endsWith(".svg")) {
        return null;
      }
      const source = optimize(
        (await readFile(id, "utf-8")).replace(/[\r\n]+/gm, "")
      );
      if (source.error || source.modernError) {
        console.error("svg optimization failed: ", id);
      }
      const dataUri = svgToMiniDataURI((source as OptimizedSvg).data);
      return `export default "${dataUri}";`;
    },
  };
}

使用

已发布为 npm 包 @liuli-util/vite-plugin-svg-patch

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { svgPatch } from "@liuli-util/vite-plugin-svg-patch";

export default defineConfig({
  plugins: [vue(), svgPatch()],
});

以下是使用插件之后，可以看到 svg 文件没有被单独分割为一个文件了。

局限性

目前，没有找到一种钩子去处理 vue style/css 文件中使用 background-image: url("") 的图片资源，可能是只有 vite 内部才可以访问的钩子吧

一种思路是使用 transformHook，但吾辈暂时不想处理 sourcemap 之类的事情，所以暂未尝试。