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

refactor: enhance InlineCssPlugin to preload JavaScript files alongside fonts and images, improving asset loading order and console logging

Browse Source
This commit is contained in:
sebseb7
2025-07-23 09:22:58 +02:00
parent bfcc320e6d
commit 5dc0280fc7
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
webpack.config.js
View File

@@ -143,6 +143,15 @@ class InlineCssPlugin {
// Remove existing CSS link tags from HTML // Remove existing CSS link tags from HTML
data.html = data.html.replace(/<link[^>]*href="[^"]*\.css"[^>]*>/g, ''); data.html = data.html.replace(/<link[^>]*href="[^"]*\.css"[^>]*>/g, '');
// Find JavaScript files to preload
const jsPreloads = [];
Object.keys(compilation.assets).forEach(assetName => {
if (assetName.endsWith('.js') && !assetName.includes('chunk')) {
// Only preload main bundle and vendor files, not chunks
jsPreloads.push(`<link rel="preload" href="/${assetName}" as="script" crossorigin>\n`);
}
});
// Extract font URLs from CSS for preloading // Extract font URLs from CSS for preloading
const fontUrls = []; const fontUrls = [];
const fontMatches = inlinedCss.match(/url\(([^)]+\.ttf)\)/g); const fontMatches = inlinedCss.match(/url\(([^)]+\.ttf)\)/g);
@@ -194,12 +203,18 @@ class InlineCssPlugin {
// 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>`;
data.html = data.html.replace('</head>', `${fontPreloads}${imagePreloads}${styleTag}\n</head>`);
// 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>`);
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) {
console.log(`✅ Added JS preloads: ${jsPreloads.length} files`);
}
// Log whether images were preloaded // Log whether images were preloaded
console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`); console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`);