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

refactor: simplify image preloading logic in InlineCssPlugin to focus on homepage and enhance console logging

Browse Source
This commit is contained in:
sebseb7
2025-07-23 09:10:45 +02:00
parent 1e8e6d7ac1
commit a653908624
1 changed files with 9 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
webpack.config.js
View File

@@ -166,35 +166,25 @@ class InlineCssPlugin {
// Skip preloading on product detail pages and other specific pages // Skip preloading on product detail pages and other specific pages
let imagePreloads = ''; let imagePreloads = '';
// Extract current page path from the HTML to determine which images to preload
// Get the output filename to determine page type // Get the output filename to determine page type
const outputPath = data.outputName || ''; const outputPath = data.outputName || '';
// Simple path-based detection // Only preload on homepage - check if this is the main index.html
const isProductPage = outputPath.includes('Artikel/'); const isHomePage = outputPath === 'index.html';
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 // Define critical images array - only preload these on homepage
const criticalImages = [ const criticalImages = [
/*'/assets/images/filiale1.jpg', '/assets/images/filiale1.jpg',
'/assets/images/filiale2.jpg', '/assets/images/filiale2.jpg',
'/assets/images/seeds.jpg', '/assets/images/seeds.jpg',
'/assets/images/cutlings.jpg', '/assets/images/cutlings.jpg',
'/assets/images/presse.jpg', '/assets/images/presse.jpg',
'/assets/images/purpl.jpg'*/ '/assets/images/purpl.jpg'
]; ];
// Only preload navigation images for main pages (home, categories, aktionen, filiale) // Only preload navigation images for homepage
// NEVER preload on product pages
let preloadCount = 0; let preloadCount = 0;
if (!isProductPage && !isSpecialPage) { if (isHomePage) {
// 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`;
@@ -211,8 +201,8 @@ class InlineCssPlugin {
console.log(`✅ Added font preloads: ${fontUrls.length} fonts`); console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
} }
// Log whether this is a product page and if images were preloaded // Log whether images were preloaded
console.log(`Page type: ${isProductPage ? 'Product Page' : isSpecialPage ? 'Special Page' : 'Regular Page'} (${outputPath})`); console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`);
if (preloadCount > 0) { if (preloadCount > 0) {
console.log(`✅ Added image preloads: ${preloadCount} critical images`); console.log(`✅ Added image preloads: ${preloadCount} critical images`);