@quark-fw/plugin-react 0.1.17 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quark-fw/plugin-react",
-	"version": "0.1.17",
+	"version": "0.1.18",
 	"main": "src/index.ts",
 	"types": "src/index.ts",
 	"type": "module",
@@ -22,8 +22,8 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@quark-fw/atom": "0.1.17",
-		"@quark-fw/plugin": "0.1.17",
+		"@quark-fw/atom": "0.1.18",
+		"@quark-fw/plugin": "0.1.18",
 		"@trpc/client": "^11.0.0",
 		"@types/react-dom": "^19.2.3",
 		"express": "^5.2.1",
@@ -36,8 +36,8 @@
 		"@mantine/dates": "^9.0.0",
 		"@mantine/modals": "^9.0.0",
 		"@mantine/notifications": "^9.0.0",
-		"@quark-fw/core": "0.1.17",
-		"@quark-fw/store": "0.1.17",
+		"@quark-fw/core": "0.1.18",
+		"@quark-fw/store": "0.1.18",
 		"@vitejs/plugin-react": "^5.1.0",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",

package/src/ssr/createPreloadTagWriter.ts

@@ -3,34 +3,51 @@ import type { Response } from "express";
 import { UglyModule } from "../Router/UglyModule.js";
 
 /**
- * Пишет в ответ preload-теги (modulepreload + css) для модулей страницы,
- * которые регистрирует роутер по мере рендера. Каждый css — один раз.
+ * Пишет в ответ preload-теги для модулей страницы, которые регистрирует
+ * роутер по мере рендера.
+ *
+ * modulepreload — только на чанк самого модуля и его прямые импорты: этого
+ * хватает, чтобы гидрация не ждала лишний хоп сети. Раньше обход шёл по
+ * всему графу импортов, и главная страница bina получала ~30 preload-ов на
+ * ~200 KB gzip, большую часть которых первый экран не исполнял. CSS, напротив,
+ * собирается по всему графу: стили вложенных чанков нужны к первому кадру,
+ * иначе разметка мигает без оформления. Каждый тег — один раз.
  */
 export function createPreloadTagWriter(manifest: Manifest, res: Response) {
-	const requiredModules: UglyModule[] = [];
-	const written: Record<string, boolean> = {};
+	const written = new Set<string>();
 
-	const extractTags = (link: string): void => {
+	const writeOnce = (id: string, tag: string) => {
+		if (written.has(id)) return;
+		written.add(id);
+		res.write(tag);
+	};
+
+	const writeCss = (link: string, seen = new Set<string>()): void => {
+		if (seen.has(link)) return;
+		seen.add(link);
 		const chunk = manifest[link];
-		if (chunk && chunk.name !== "entry-client") {
-			res.write(
-				`<link rel="modulepreload" as="script" crossorigin href="/${chunk.file}">`,
-			);
-			(chunk.css ?? []).forEach((cssFile) => {
-				if (!written[cssFile]) {
-					written[cssFile] = true;
-					res.write(`<link rel="stylesheet" href="/${cssFile}"/>`);
-				}
-			});
-			(chunk.imports ?? []).map((childLink) => extractTags(childLink));
-		}
+		if (!chunk) return;
+		(chunk.css ?? []).forEach((cssFile) =>
+			writeOnce(cssFile, `<link rel="stylesheet" href="/${cssFile}"/>`),
+		);
+		(chunk.imports ?? []).forEach((child) => writeCss(child, seen));
 	};
 
-	return function registerModule(uglyModule: UglyModule) {
-		if (!requiredModules.includes(uglyModule)) {
-			requiredModules.push(uglyModule);
+	const writeModule = (link: string) => {
+		const chunk = manifest[link];
+		if (!chunk || chunk.name === "entry-client") return;
+		writeOnce(
+			chunk.file,
+			`<link rel="modulepreload" as="script" crossorigin href="/${chunk.file}">`,
+		);
+	};
 
-			extractTags(uglyModule.modulePath.substring(1));
-		}
+	return function registerModule(uglyModule: UglyModule) {
+		const link = uglyModule.modulePath.substring(1);
+		const chunk = manifest[link];
+		if (!chunk || chunk.name === "entry-client") return;
+		writeModule(link);
+		(chunk.imports ?? []).forEach(writeModule);
+		writeCss(link);
 	};
 }