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
let imagePreloads = '';
// Extract current page path from the HTML to determine which images to preload
// 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');
// Only preload on homepage - check if this is the main index.html
const isHomePage = outputPath === 'index.html';
// Define critical images array - only preload these on pages that actually use them
// Define critical images array - only preload these on homepage
const criticalImages = [
/*'/assets/images/filiale1.jpg',
'/assets/images/filiale1.jpg',
'/assets/images/filiale2.jpg',
'/assets/images/seeds.jpg',
'/assets/images/cutlings.jpg',
'/assets/images/presse.jpg',
'/assets/images/purpl.jpg'*/
'/assets/images/purpl.jpg'
];
// Only preload navigation images for main pages (home, categories, aktionen, filiale)
// NEVER preload on product pages
// Only preload navigation images for homepage
let preloadCount = 0;
if (!isProductPage && !isSpecialPage) {
if (isHomePage) {
// Add the as="image" attribute to ensure proper preloading
criticalImages.forEach(imagePath => {
imagePreloads += `<link rel="preload" href="${imagePath}" as="image">\n`;
@@ -211,8 +201,8 @@ class InlineCssPlugin {
console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
}
// 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})`);
// Log whether images were preloaded
console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`);
if (preloadCount > 0) {
console.log(`✅ Added image preloads: ${preloadCount} critical images`);