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

refactor: update image preloading logic in InlineCssPlugin to use output filename for page type detection and improve console logging

Browse Source
This commit is contained in:
sebseb7
2025-07-23 08:58:14 +02:00
parent c906e0c936
commit acdfc38b4a
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
webpack.config.js
View File

@@ -167,18 +167,19 @@ class InlineCssPlugin {
let imagePreloads = ''; let imagePreloads = '';
// Extract current page path from the HTML to determine which images to preload // Extract current page path from the HTML to determine which images to preload
const htmlContent = data.html; // Get the output filename to determine page type
const isProductPage = htmlContent.includes('ProductDetailPage') || const outputPath = data.outputName || '';
htmlContent.includes('/Artikel/') ||
htmlContent.includes('product-detail'); // Simple path-based detection
const isSpecialPage = htmlContent.includes('/impressum') || const isProductPage = outputPath.includes('Artikel/');
htmlContent.includes('/datenschutz') || const isSpecialPage = outputPath.includes('impressum') ||
htmlContent.includes('/agb') || outputPath.includes('datenschutz') ||
htmlContent.includes('/profile') || outputPath.includes('agb') ||
htmlContent.includes('/admin') || outputPath.includes('profile') ||
htmlContent.includes('/404') || outputPath.includes('admin') ||
htmlContent.includes('/widerrufsrecht') || outputPath.includes('404') ||
htmlContent.includes('/batteriegesetzhinweise'); outputPath.includes('widerrufsrecht') ||
outputPath.includes('batteriegesetzhinweise');
// Define critical images array - only preload these on pages that actually use them // Define critical images array - only preload these on pages that actually use them
const criticalImages = [ const criticalImages = [
@@ -191,10 +192,13 @@ class InlineCssPlugin {
]; ];
// Only preload navigation images for main pages (home, categories, aktionen, filiale) // Only preload navigation images for main pages (home, categories, aktionen, filiale)
// NEVER preload on product pages
let preloadCount = 0;
if (!isProductPage && !isSpecialPage) { if (!isProductPage && !isSpecialPage) {
// Add the as="image" attribute to ensure proper preloading // Add the as="image" attribute to ensure proper preloading
criticalImages.forEach(imagePath => { criticalImages.forEach(imagePath => {
imagePreloads += `<link rel="preload" href="${imagePath}" as="image">\n`; imagePreloads += `<link rel="preload" href="${imagePath}" as="image">\n`;
preloadCount++;
}); });
} }
@@ -206,9 +210,14 @@ class InlineCssPlugin {
if (fontUrls.length > 0) { if (fontUrls.length > 0) {
console.log(`✅ Added font preloads: ${fontUrls.length} fonts`); console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
} }
if (imagePreloads.length > 0) {
const preloadCount = (imagePreloads.match(/<link/g) || []).length; // Log whether this is a product page and if images were preloaded
console.log(`Page type: ${isProductPage ? 'Product Page' : isSpecialPage ? 'Special Page' : 'Regular Page'} (${outputPath})`);
if (preloadCount > 0) {
console.log(`✅ Added image preloads: ${preloadCount} critical images`); console.log(`✅ Added image preloads: ${preloadCount} critical images`);
} else {
console.log(`✅ No image preloads added for ${outputPath}`);
} }
} }