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

refactor: disable font and image preloading in InlineCssPlugin for improved clarity and maintainability

Browse Source
This commit is contained in:
sebseb7
2025-07-23 09:24:35 +02:00
parent 5dc0280fc7
commit 72010c410e
1 changed files with 42 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
webpack.config.js
View File

@@ -152,27 +152,25 @@ class InlineCssPlugin {
}
});
// Extract font URLs from CSS for preloading
const fontUrls = [];
const fontMatches = inlinedCss.match(/url\(([^)]+\.ttf)\)/g);
if (fontMatches) {
fontMatches.forEach(match => {
const fontUrl = match.replace(/url\(([^)]+)\)/, '$1').replace(/['"]/g, '');
if (!fontUrls.includes(fontUrl)) {
fontUrls.push(fontUrl);
}
});
}
// Extract font URLs from CSS for preloading - DISABLED
// const fontUrls = [];
// const fontMatches = inlinedCss.match(/url\(([^)]+\.ttf)\)/g);
// if (fontMatches) {
// fontMatches.forEach(match => {
// const fontUrl = match.replace(/url\(([^)]+)\)/, '$1').replace(/['"]/g, '');
// if (!fontUrls.includes(fontUrl)) {
// fontUrls.push(fontUrl);
// }
// });
// }
// Add font preload links
// Add font preload links - DISABLED
let fontPreloads = '';
fontUrls.forEach(fontUrl => {
fontPreloads += `<link rel="preload" href="${fontUrl}" as="font" crossorigin>\n`;
});
// fontUrls.forEach(fontUrl => {
// fontPreloads += `<link rel="preload" href="${fontUrl}" as="font" crossorigin>\n`;
// });
// Add critical image preloads for LCP optimization - only for pages that need them
// These images are used in MainPageLayout (home, aktionen, filiale) and Content (category pages)
// Skip preloading on product detail pages and other specific pages
// Add critical image preloads - DISABLED
let imagePreloads = '';
// Get the output filename to determine page type
@@ -182,36 +180,35 @@ class InlineCssPlugin {
const isHomePage = outputPath === 'index.html';
// Define critical images array - only preload these on homepage
const criticalImages = [
'/assets/images/filiale1.jpg',
'/assets/images/filiale2.jpg',
'/assets/images/seeds.jpg',
'/assets/images/cutlings.jpg',
'/assets/images/presse.jpg',
'/assets/images/purpl.jpg'
];
// const criticalImages = [
// '/assets/images/filiale1.jpg',
// '/assets/images/filiale2.jpg',
// '/assets/images/seeds.jpg',
// '/assets/images/cutlings.jpg',
// '/assets/images/presse.jpg',
// '/assets/images/purpl.jpg'
// ];
// Only preload navigation images for homepage
// Only preload navigation images for homepage - DISABLED
let preloadCount = 0;
if (isHomePage) {
// Add the as="image" attribute to ensure proper preloading
criticalImages.forEach(imagePath => {
imagePreloads += `<link rel="preload" href="${imagePath}" as="image">\n`;
preloadCount++;
});
}
// if (isHomePage) {
// // Add the as="image" attribute to ensure proper preloading
// criticalImages.forEach(imagePath => {
// imagePreloads += `<link rel="preload" href="${imagePath}" as="image">\n`;
// preloadCount++;
// });
// }
// Add inlined CSS to head
const styleTag = `<style type="text/css">${inlinedCss.trim()}</style>`;
// Place the preload tags in the correct order: JS first, then fonts, then images
// We need to modify how we inject these into the HTML
data.html = data.html.replace('</head>', `${styleTag}\n${jsPreloads.join('')}${fontPreloads}${imagePreloads}</head>`);
// Place only JS preloads in the head, no font or image preloads
data.html = data.html.replace('</head>', `${styleTag}\n${jsPreloads.join('')}</head>`);
console.log(`✅ Inlined CSS assets: ${cssAssets.join(', ')} (${Math.round(inlinedCss.length / 1024)}KB)`);
if (fontUrls.length > 0) {
console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
}
// if (fontUrls.length > 0) {
// console.log(`✅ Added font preloads: ${fontUrls.length} fonts`);
// }
if (jsPreloads.length > 0) {
console.log(`✅ Added JS preloads: ${jsPreloads.length} files`);
}
@@ -219,11 +216,11 @@ class InlineCssPlugin {
// Log whether images were preloaded
console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`);
if (preloadCount > 0) {
console.log(`✅ Added image preloads: ${preloadCount} critical images`);
} else {
console.log(`✅ No image preloads added for ${outputPath}`);
}
// if (preloadCount > 0) {
// console.log(`✅ Added image preloads: ${preloadCount} critical images`);
// } else {
// console.log(`✅ No image preloads added for ${outputPath}`);
// }
}
cb(null, data);