Почему VITE автоматически вставляет <link rel = "preload" as = "image"> теги для изображений и как я могу ее отключить и ⇐ Html

[Anonymous]

Я использую Vite + React со сборками SSR и SPA.

Когда я запускаю сервер разработки или сборку для рабочей среды, Vite автоматически вставляет теги предварительной загрузки изображения, например:

Код: Выделить всё

[*]
...

Я никогда не добавлял эти ссылки на предварительную нагрузку нигде в моем коде (не в index.html , а не в компонентах React).
Что я проверил:

• Эти теги не в index /> Они не импортируются и не отображаются вручную в каких -либо компонентах.

  Код: Выделить всё

  ), но не смог найти его в исходном коде. Они появляются только в выходных данных сборки.

То же самое происходит как в девелоперских, так и в рабочих сборках. Это происходит последовательно с любым изображением, используемым в компонентах React.
Временное решение, которое я попробовал:
В качестве временного исправления на этапе отправки окончательного HTML-кода SSR я извлекаю эти теги предварительной загрузки изображения из корня, удаляю их, а затем вручную вставляю их в перед отправкой ответ.
Это работает, но не кажется лучшим решением.
Моя конфигурация Vite:

Код: Выделить всё

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "node:path";
import { getProxyOptions } from "./server/proxy/getProxyOptions.js";

export default defineConfig(({ mode, isSsrBuild }) => {
const isDev = mode === "development";
const isSpa = process.env.SPA === "true";

const env = loadEnv(mode, process.cwd(), "REACT_APP_");
const defineEnv = Object.entries(env).reduce((acc, [key, val]) => {
acc[`process.env.${key}`] = JSON.stringify(val);
return acc;
}, {});
const proxyOption = getProxyOptions(env);

return {
root: isSpa ? path.resolve(__dirname, "spaRoot") : path.resolve(__dirname, "."),
plugins: [react()],
publicDir: path.resolve(__dirname, "public"),
define: defineEnv,
build: {
minify: "esbuild",
sourcemap: false,
cssMinify: true,
copyPublicDir: !isSsrBuild,
rollupOptions: { output: { manualChunks: undefined } },
},
ssr: isDev ? {} : {
noExternal: [/^@forproxyband\/main-ui-kit/, "classnames", "lodash", "uuid"],
},
server: {
proxy: proxyOption && isDev ? { "/api": proxyOption } : undefined,
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"/src": path.resolve(__dirname, "src"),
},
},
};
});

Мои вопросы:

• Откуда именно эти теги предварительной загрузки изображений берутся во время выполнения Vite?
• Как я могу отключить или контролировать это поведение (например, отключить предварительную загрузку изображений или переместить их в )?
• Почему они вставлен внутри элемента #root вместо ?

Подробнее здесь: https://stackoverflow.com/questions/797 ... s-for-imag