Skip to content

Commit 97f9fb9

Browse files
jantimonjantimon
committed
fix: load script files before style files files in defer script loading mode
1 parent e97ce17 commit 97f9fb9

File tree

2 files changed

+26
-1
lines changed

2 files changed

+26
-1
lines changed

‎index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -833,7 +833,10 @@ class HtmlWebpackPlugin {
833833
if (scriptTarget === 'body') {
834834
result.bodyTags.push(...assetTags.scripts);
835835
} else {
836-
result.headTags.push(...assetTags.scripts);
836+
// If script loading is blocking add the scripts to the end of the head
837+
// If script loading is non-blocking add the scripts infront of the css files
838+
const insertPosition = this.options.scriptLoading === 'blocking' ? result.headTags.length : assetTags.meta.length;
839+
result.headTags.splice(insertPosition, 0, ...assetTags.scripts);
837840
}
838841
return result;
839842
}

‎spec/basic.spec.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2282,4 +2282,26 @@ describe('HtmlWebpackPlugin', () => {
22822282
})]
22832283
}, [/<body>.*<script defer="defer"/], null, done);
22842284
});
2285+
2286+
it('should allow to inject scripts with a defer in front of styles', done => {
2287+
testHtmlPlugin({
2288+
mode: 'production',
2289+
entry: path.join(__dirname, 'fixtures/theme.js'),
2290+
output: {
2291+
path: OUTPUT_DIR,
2292+
filename: 'index_bundle.js'
2293+
},
2294+
module: {
2295+
rules: [
2296+
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
2297+
]
2298+
},
2299+
plugins: [
2300+
new HtmlWebpackPlugin({
2301+
scriptLoading: 'defer'
2302+
}),
2303+
new MiniCssExtractPlugin({ filename: 'styles.css' })
2304+
]
2305+
}, [/<script defer="defer".+<link href="styles.css"/], null, done);
2306+
});
22852307
});

0 commit comments

Comments
 (0)