diff --git a/webpack.config.js b/webpack.config.js index f0ba916..a4d69f0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -143,6 +143,15 @@ class InlineCssPlugin { // Remove existing CSS link tags from HTML data.html = data.html.replace(/]*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(`\n`); + } + }); + // Extract font URLs from CSS for preloading const fontUrls = []; const fontMatches = inlinedCss.match(/url\(([^)]+\.ttf)\)/g); @@ -194,12 +203,18 @@ class InlineCssPlugin { // Add inlined CSS to head const styleTag = ``; - data.html = data.html.replace('', `${fontPreloads}${imagePreloads}${styleTag}\n`); + + // 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('', `${styleTag}\n${jsPreloads.join('')}${fontPreloads}${imagePreloads}`); 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 (jsPreloads.length > 0) { + console.log(`✅ Added JS preloads: ${jsPreloads.length} files`); + } // Log whether images were preloaded console.log(`Page: ${outputPath} - Is homepage: ${isHomePage}`);