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

webpack.config.js

@@ -143,6 +143,15 @@ class InlineCssPlugin {
             // Remove existing CSS link tags from HTML
             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
             const fontUrls = [];
             const fontMatches = inlinedCss.match(/url\(([^)]+\.ttf)\)/g);
@@ -194,12 +203,18 @@ class InlineCssPlugin {
             
             // Add inlined CSS to head
             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)`);
             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}`);