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