Skip to content

Commit 35b6b87

Browse files
jantimonjantimon
committed
feat: use defer as default script loading mechanism
BREAKING CHANGE: scripts are now loaded defered in the <head> tag to improve page load performance by default - This can be turned of by setting `scriptLoading: ‘blocking’`
1 parent 37c4c55 commit 35b6b87

File tree

25 files changed

+161
-103
lines changed

25 files changed

+161
-103
lines changed

‎examples/appcache/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en" manifest="manifest.appcache"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
1+
<!doctype html><html lang="en" manifest="manifest.appcache"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"></body></html>

‎examples/appcache/dist/webpack-5/manifest.appcache

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
CACHE MANIFEST
2-
# f509954c60c2fd048c91
2+
# 8bbe00db9cab8f982354
33

44
0714810ae3fb211173e2964249507195.png
55
styles.css

‎examples/chunk-optimization/dist/webpack-5/73.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[73],{
1+
(self["webpackChunk"] = self["webpackChunk"] || []).push([[73],{
22

33
/***/ 173:
44
/***/ ((module, exports, __webpack_require__) => {

‎examples/chunk-optimization/dist/webpack-5/805.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[805],{
1+
(self["webpackChunk"] = self["webpackChunk"] || []).push([[805],{
22

33
/***/ 609:
44
/***/ ((module) => {

‎examples/chunk-optimization/dist/webpack-5/entryA.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="libMath.js"></script><script src="libText.js"></script><script src="805.js"></script><script src="73.js"></script><script src="entryA.js"></script></body></html>
1+
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="libMath.js"></script><script defer="defer" src="libText.js"></script><script defer="defer" src="805.js"></script><script defer="defer" src="73.js"></script><script defer="defer" src="entryA.js"></script></head><body></body></html>

‎examples/chunk-optimization/dist/webpack-5/entryA.js

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ document.body.appendChild(h1);
5050
/******/
5151
/******/ /* webpack/runtime/jsonp chunk loading */
5252
/******/ (() => {
53+
/******/ // no baseURI
54+
/******/
5355
/******/ // object to store loaded and loading chunks
5456
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
5557
/******/ // Promise = chunk loading, 0 = chunk loaded
@@ -100,17 +102,14 @@ document.body.appendChild(h1);
100102
/******/ __webpack_require__.x = () => {
101103
/******/
102104
/******/ }
103-
/******/ jsonpArray = jsonpArray.slice();
104-
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
105+
/******/ chunkLoadingGlobal = chunkLoadingGlobal.slice();
106+
/******/ for(var i = 0; i < chunkLoadingGlobal.length; i++) webpackJsonpCallback(chunkLoadingGlobal[i]);
105107
/******/ return (checkDeferredModules = checkDeferredModulesImpl)();
106108
/******/ };
107109
/******/
108110
/******/ // install a JSONP callback for chunk loading
109-
/******/ function webpackJsonpCallback(data) {
110-
/******/ var chunkIds = data[0];
111-
/******/ var moreModules = data[1];
112-
/******/ var executeModules = data[2];
113-
/******/ var runtime = data[3];
111+
/******/ var webpackJsonpCallback = (data) => {
112+
/******/ var [chunkIds, moreModules, runtime, executeModules] = data;
114113
/******/ // add "moreModules" to the modules object,
115114
/******/ // then flag all "chunkIds" as loaded and fire callback
116115
/******/ var moduleId, chunkId, i = 0, resolves = [];
@@ -127,7 +126,7 @@ document.body.appendChild(h1);
127126
/******/ }
128127
/******/ }
129128
/******/ if(runtime) runtime(__webpack_require__);
130-
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
129+
/******/ parentChunkLoadingFunction(data);
131130
/******/ while(resolves.length) {
132131
/******/ resolves.shift()();
133132
/******/ }
@@ -137,12 +136,11 @@ document.body.appendChild(h1);
137136
/******/
138137
/******/ // run deferred modules when all chunks ready
139138
/******/ return checkDeferredModules();
140-
/******/ };
139+
/******/ }
141140
/******/
142-
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
143-
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
144-
/******/ jsonpArray.push = webpackJsonpCallback;
145-
/******/ var parentJsonpFunction = oldJsonpFunction;
141+
/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
142+
/******/ var parentChunkLoadingFunction = chunkLoadingGlobal.push.bind(chunkLoadingGlobal);
143+
/******/ chunkLoadingGlobal.push = webpackJsonpCallback;
146144
/******/ })();
147145
/******/
148146
/************************************************************************/

‎examples/chunk-optimization/dist/webpack-5/entryB.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="libMath.js"></script><script src="805.js"></script><script src="73.js"></script><script src="entryB.js"></script></body></html>
1+
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="libMath.js"></script><script defer="defer" src="805.js"></script><script defer="defer" src="73.js"></script><script defer="defer" src="entryB.js"></script></head><body></body></html>

‎examples/chunk-optimization/dist/webpack-5/entryB.js

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ document.body.appendChild(h1);
4949
/******/
5050
/******/ /* webpack/runtime/jsonp chunk loading */
5151
/******/ (() => {
52+
/******/ // no baseURI
53+
/******/
5254
/******/ // object to store loaded and loading chunks
5355
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
5456
/******/ // Promise = chunk loading, 0 = chunk loaded
@@ -99,17 +101,14 @@ document.body.appendChild(h1);
99101
/******/ __webpack_require__.x = () => {
100102
/******/
101103
/******/ }
102-
/******/ jsonpArray = jsonpArray.slice();
103-
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
104+
/******/ chunkLoadingGlobal = chunkLoadingGlobal.slice();
105+
/******/ for(var i = 0; i < chunkLoadingGlobal.length; i++) webpackJsonpCallback(chunkLoadingGlobal[i]);
104106
/******/ return (checkDeferredModules = checkDeferredModulesImpl)();
105107
/******/ };
106108
/******/
107109
/******/ // install a JSONP callback for chunk loading
108-
/******/ function webpackJsonpCallback(data) {
109-
/******/ var chunkIds = data[0];
110-
/******/ var moreModules = data[1];
111-
/******/ var executeModules = data[2];
112-
/******/ var runtime = data[3];
110+
/******/ var webpackJsonpCallback = (data) => {
111+
/******/ var [chunkIds, moreModules, runtime, executeModules] = data;
113112
/******/ // add "moreModules" to the modules object,
114113
/******/ // then flag all "chunkIds" as loaded and fire callback
115114
/******/ var moduleId, chunkId, i = 0, resolves = [];
@@ -126,7 +125,7 @@ document.body.appendChild(h1);
126125
/******/ }
127126
/******/ }
128127
/******/ if(runtime) runtime(__webpack_require__);
129-
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
128+
/******/ parentChunkLoadingFunction(data);
130129
/******/ while(resolves.length) {
131130
/******/ resolves.shift()();
132131
/******/ }
@@ -136,12 +135,11 @@ document.body.appendChild(h1);
136135
/******/
137136
/******/ // run deferred modules when all chunks ready
138137
/******/ return checkDeferredModules();
139-
/******/ };
138+
/******/ }
140139
/******/
141-
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
142-
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
143-
/******/ jsonpArray.push = webpackJsonpCallback;
144-
/******/ var parentJsonpFunction = oldJsonpFunction;
140+
/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
141+
/******/ var parentChunkLoadingFunction = chunkLoadingGlobal.push.bind(chunkLoadingGlobal);
142+
/******/ chunkLoadingGlobal.push = webpackJsonpCallback;
145143
/******/ })();
146144
/******/
147145
/************************************************************************/

‎examples/chunk-optimization/dist/webpack-5/entryC.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="libMath.js"></script><script src="libText.js"></script><script src="805.js"></script><script src="73.js"></script><script src="entryA.js"></script><script src="entryB.js"></script></body></html>
1+
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="libMath.js"></script><script defer="defer" src="libText.js"></script><script defer="defer" src="805.js"></script><script defer="defer" src="73.js"></script><script defer="defer" src="entryA.js"></script><script defer="defer" src="entryB.js"></script></head><body></body></html>

‎examples/chunk-optimization/dist/webpack-5/libMath.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[494],{
1+
(self["webpackChunk"] = self["webpackChunk"] || []).push([[494],{
22

33
/***/ 179:
44
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

‎examples/chunk-optimization/dist/webpack-5/libText.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[491],{
1+
(self["webpackChunk"] = self["webpackChunk"] || []).push([[491],{
22

33
/***/ 631:
44
/***/ ((module) => {

‎examples/custom-insertion-position/dist/webpack-5/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
4+
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script>
55
<title>Custom insertion example</title>
66
</head>
77
<body>
88
All scripts are placed here:
9-
<script src="bundle.js"></script>
9+
1010
<script>console.log("Executed after all other scripts")</script>
1111
</body>
1212
</html>

‎examples/custom-template/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"></body></html>

‎examples/default/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="bundle.js"></script></body></html>
1+
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script></head><body></body></html>

‎examples/favicon/dist/webpack-5/favicon.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><meta charset="utf-8"><title>HtmlWebpackPlugin example</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><script src="bundle.js"></script></body></html>
1+
<!doctype html><html><head><meta charset="utf-8"><title>HtmlWebpackPlugin example</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body></body></html>

‎examples/html-loader/dist/webpack-5/about.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"></body></html>

‎examples/html-loader/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"></body></html>

‎examples/javascript-advanced/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<html><head><title>Webpack App</title><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script></body></html>
1+
<html><head><title>Webpack App</title><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"></body></html>

‎examples/javascript/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<head><link href="styles.css" rel="stylesheet"></head>Hello World from backend2020-03-30T16:36:46.399Z<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png"><script src="bundle.js"></script>
1+
<head><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>Hello World from backend2020-10-14T14:25:45.361Z<h2>Partial</h2><img src="0714810ae3fb211173e2964249507195.png">

‎examples/pug-loader/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><title>pug demo</title><link rel="icon" href="favicon.ico"><link href="styles.css" rel="stylesheet"></head><body><div id="main"><div class="time"><b>Current time</b><p>1998-12-31T23:00:00.000Z</p></div><img src="#{require('./logo.png')}"></div><script src="bundle.js"></script></body></html>
1+
<!doctype html><html><head><title>pug demo</title><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><div id="main"><div class="time"><b>Current time</b><p>1998-12-31T23:00:00.000Z</p></div><img src="#{require('./logo.png')}"></div></body></html>

‎examples/sort-manually/dist/webpack-5/first-file.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="a.js"></script><script src="b.js"></script><script src="c.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="c.js"></script></body></html>

‎examples/sort-manually/dist/webpack-5/second-file.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script src="a.js"></script><script src="b.js"></script><script src="d.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="styles.css" rel="stylesheet"></head><body><img src="0714810ae3fb211173e2964249507195.png"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="d.js"></script></body></html>

‎examples/template-parameters/dist/webpack-5/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html><head><meta charset="utf-8"><title>bar</title></head><body><script src="bundle.js"></script></body></html>
1+
<!doctype html><html><head><meta charset="utf-8"><title>bar</title><script defer="defer" src="bundle.js"></script></head><body></body></html>

‎index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ class HtmlWebpackPlugin {
5151
filename: 'index.html',
5252
publicPath: userOptions.publicPath === undefined ? 'auto' : userOptions.publicPath,
5353
hash: false,
54-
inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head',
55-
scriptLoading: 'blocking',
54+
inject: userOptions.scriptLoading === 'blocking' ? 'body' : 'head',
55+
scriptLoading: 'defer',
5656
compile: true,
5757
favicon: false,
5858
minify: 'auto',
@@ -251,7 +251,8 @@ function hookIntoCompiler (compiler, options, plugin) {
251251
}))
252252
.then(({ assetTags }) => {
253253
// Inject scripts to body unless it set explicitly to head
254-
const scriptTarget = options.inject === 'head' ? 'head' : 'body';
254+
const scriptTarget = options.inject === 'head' ||
255+
(options.inject === false && options.scriptLoading !== 'blocking') ? 'head' : 'body';
255256
// Group assets to `head` and `body` tag arrays
256257
const assetGroups = generateAssetGroups(assetTags, scriptTarget);
257258
// Allow third-party-plugin authors to reorder and change the assetTags once they are grouped

0 commit comments

Comments
 (0)