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