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}`);