seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: remove combined CSS file writing and optimize page-specific CSS handling in prerender logic

Browse Source
This commit is contained in:
sebseb7
2025-07-20 12:35:05 +02:00
parent 275ee3bea6
commit 8629dc5d87
2 changed files with 12 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
prerender.cjs
View File

@@ -103,7 +103,6 @@ const shopConfig = require("./src/config.js").default;
const { renderPage } = require("./prerender/renderer.cjs"); const { renderPage } = require("./prerender/renderer.cjs");
const { const {
collectAllCategories, collectAllCategories,
writeCombinedCssFile,
} = require("./prerender/utils.cjs"); } = require("./prerender/utils.cjs");
const { const {
generateProductMetaTags, generateProductMetaTags,
@@ -642,8 +641,7 @@ const renderApp = async (categoryData, socket) => {
); );
} }
// Write the combined CSS file after all pages are rendered // No longer writing combined CSS file - each page has its own embedded CSS
writeCombinedCssFile(config.globalCssCollection, config.outputDir);
// Generate XML sitemap with all rendered pages // Generate XML sitemap with all rendered pages
console.log("\n🗺️ Generating XML sitemap..."); console.log("\n🗺️ Generating XML sitemap...");

42
prerender/renderer.cjs
View File

@@ -27,7 +27,7 @@ const renderPage = (
globalCssCollection, globalCssCollection,
webpackEntrypoints, webpackEntrypoints,
} = config; } = config;
const { writeCombinedCssFile, optimizeCss } = require("./utils.cjs"); const { optimizeCss } = require("./utils.cjs");
// @note Set prerender fallback flag in global environment for CategoryBox during SSR // @note Set prerender fallback flag in global environment for CategoryBox during SSR
if (typeof global !== "undefined" && global.window) { if (typeof global !== "undefined" && global.window) {
@@ -52,26 +52,20 @@ const renderPage = (
); );
let renderedMarkup; let renderedMarkup;
let pageSpecificCss = ""; // Declare outside try block for broader scope
try { try {
renderedMarkup = ReactDOMServer.renderToString(pageElement); renderedMarkup = ReactDOMServer.renderToString(pageElement);
const emotionChunks = extractCriticalToChunks(renderedMarkup); const emotionChunks = extractCriticalToChunks(renderedMarkup);
// Collect CSS from this page // Collect CSS from this page for direct inlining (no global accumulation)
if (emotionChunks.styles.length > 0) { if (emotionChunks.styles.length > 0) {
const oldSize = globalCssCollection.size;
emotionChunks.styles.forEach((style) => { emotionChunks.styles.forEach((style) => {
if (style.css) { if (style.css) {
globalCssCollection.add(style.css); pageSpecificCss += style.css + "\n";
} }
}); });
if (!suppressLogs) console.log(` - CSS rules: ${emotionChunks.styles.length}`);
// Check if new styles were added
if (globalCssCollection.size > oldSize) {
// Write CSS file immediately when new styles are added
writeCombinedCssFile(globalCssCollection, outputDir);
}
} }
} catch (error) { } catch (error) {
console.error(`❌ Rendering failed for ${filename}:`, error); console.error(`❌ Rendering failed for ${filename}:`, error);
@@ -127,26 +121,12 @@ const renderPage = (
} }
}); });
// Read and inline prerender CSS to eliminate render-blocking request // Inline page-specific CSS directly (no shared prerender.css file)
try { if (pageSpecificCss.trim()) {
const prerenderCssPath = path.resolve(__dirname, "..", outputDir, "prerender.css"); // Use advanced CSS optimization on page-specific CSS
if (fs.existsSync(prerenderCssPath)) { const optimizedPageCss = optimizeCss(pageSpecificCss);
const prerenderCssContent = fs.readFileSync(prerenderCssPath, "utf8"); inlinedCss += optimizedPageCss;
// Use advanced CSS optimization if (!suppressLogs) console.log(` ✅ Inlined page-specific CSS (${Math.round(optimizedPageCss.length / 1024)}KB)`);
const optimizedPrerenderCss = optimizeCss(prerenderCssContent);
inlinedCss += optimizedPrerenderCss;
if (!suppressLogs) console.log(` ✅ Inlined prerender CSS (${Math.round(optimizedPrerenderCss.length / 1024)}KB)`);
} else {
// Fallback to external loading if prerender.css doesn't exist yet
additionalTags += `<link rel="preload" href="/prerender.css" as="style" onload="this.onload=null;this.rel='stylesheet'">`;
additionalTags += `<noscript><link rel="stylesheet" href="/prerender.css"></noscript>`;
if (!suppressLogs) console.log(` ⚠️ prerender.css not found for inlining, using async loading`);
}
} catch (error) {
// Fallback to external loading
additionalTags += `<link rel="preload" href="/prerender.css" as="style" onload="this.onload=null;this.rel='stylesheet'">`;
additionalTags += `<noscript><link rel="stylesheet" href="/prerender.css"></noscript>`;
if (!suppressLogs) console.log(` ⚠️ Error reading prerender.css: ${error.message}, using async loading`);
} }
// Add JavaScript files // Add JavaScript files