Electron集成Vite/React应用时SVG Sprite无法缓存，每次渲染重复请求

问题背景 #

基于Vite/React的应用，使用@tabler/icons的SVG Sprite实现动态图标加载（支持用户自定义笔记图标），核心组件代码如下：

export function Icon(props: {icon: string}) {
    return (
        <svg>
            <use href={`assets/tabler-sprite-nostroke.svg#tabler-${props.icon}`} />
        </svg>
    );
}

独立运行（Vite开发服务或生产构建后部署）时，浏览器仅请求一次Sprite文件，所有图标加载正常。但集成到Electron并构建生产版本后，每个图标渲染都会触发一次Sprite文件的磁盘请求，单个图标加载耗时约300ms，Network面板可看到重复请求记录。

已尝试但无效的方案：

• 将Sprite文件放入Vite public目录
• 使用vite-plugin-static-copy打包Sprite到产物
• 从node_modules直接导入Sprite
• 禁用electron-builder的asar归档
• 在Electron主进程通过onHeadersReceived注入缓存头
• 用<img>预加载Sprite触发缓存
• 替换<use>的href为xlinkHref

可行解决方案 #

1. 内联SVG Sprite到入口HTML #

把整个Sprite的内容直接内嵌到应用的index.html中，彻底消除磁盘IO：

1. 打开tabler-sprite-nostroke.svg，复制所有内容（包含根<svg>标签）
2. 粘贴到index.html的<body>末尾，给根<svg>添加style="display: none;"隐藏内容

修改Icon组件，直接引用内联的ID：

export function Icon(props: {icon: string}) {
    return (
        <svg>
            <use href={`#tabler-${props.icon}`} />
        </svg>
    );
}

这种方式性能最优，所有图标直接从DOM读取，无任何文件请求。

2. 预加载Sprite为Blob URL #

在应用初始化时读取Sprite内容并生成Blob URL，所有图标统一引用该URL，确保仅加载一次：

// 应用入口文件（如main.tsx）
import spriteContent from '@tabler/icons/sprite/tabler-sprite-nostroke.svg?raw';

let spriteBlobUrl: string;

// 初始化时预加载
function initSprite() {
    const blob = new Blob([spriteContent], { type: 'image/svg+xml' });
    spriteBlobUrl = URL.createObjectURL(blob);
    // 可选：将Sprite挂载到DOM，增强缓存稳定性
    const hiddenSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    hiddenSvg.style.display = 'none';
    hiddenSvg.innerHTML = spriteContent.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
    document.body.appendChild(hiddenSvg);
}

initSprite();

// 更新Icon组件
export function Icon(props: {icon: string}) {
    return (
        <svg>
            <use href={`${spriteBlobUrl}#tabler-${props.icon}`} />
        </svg>
    );
}

注意：Vite中需通过?raw后缀导入SVG的纯文本内容，确保能获取完整代码。

3. 配置Electron本地文件缓存规则 #

在Electron主进程中，针对Sprite文件的file://请求强制设置缓存策略：

// main.js
const { app, session } = require('electron');

app.whenReady().then(() => {
    session.defaultSession.webRequest.onBeforeRequest(
        { urls: ['file://**/tabler-sprite-nostroke.svg'] },
        (details, callback) => {
            callback({
                responseHeaders: {
                    'Cache-Control': 'public, max-age=31536000, immutable'
                }
            });
        }
    );
});

相比onHeadersReceived，onBeforeRequest在请求发起阶段就注入缓存头，能更有效地让Electron渲染进程缓存文件。

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