Skip to content

Commit

Permalink
feat: use defer as default script loading mechanism
Browse files Browse the repository at this point in the history
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’`
  • Loading branch information
jantimon committed Jan 20, 2021
1 parent 37c4c55 commit 35b6b87
Show file tree
Hide file tree
Showing 25 changed files with 161 additions and 103 deletions.
2 changes: 1 addition & 1 deletion examples/appcache/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/appcache/dist/webpack-5/manifest.appcache
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
CACHE MANIFEST
# f509954c60c2fd048c91
# 8bbe00db9cab8f982354

0714810ae3fb211173e2964249507195.png
styles.css
Expand Down
2 changes: 1 addition & 1 deletion examples/chunk-optimization/dist/webpack-5/73.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[73],{
(self["webpackChunk"] = self["webpackChunk"] || []).push([[73],{

/***/ 173:
/***/ ((module, exports, __webpack_require__) => {
Expand Down
2 changes: 1 addition & 1 deletion examples/chunk-optimization/dist/webpack-5/805.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[805],{
(self["webpackChunk"] = self["webpackChunk"] || []).push([[805],{

/***/ 609:
/***/ ((module) => {
Expand Down
2 changes: 1 addition & 1 deletion examples/chunk-optimization/dist/webpack-5/entryA.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
24 changes: 11 additions & 13 deletions examples/chunk-optimization/dist/webpack-5/entryA.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ document.body.appendChild(h1);
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // Promise = chunk loading, 0 = chunk loaded
Expand Down Expand Up @@ -100,17 +102,14 @@ document.body.appendChild(h1);
/******/ __webpack_require__.x = () => {
/******/
/******/ }
/******/ jsonpArray = jsonpArray.slice();
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/ chunkLoadingGlobal = chunkLoadingGlobal.slice();
/******/ for(var i = 0; i < chunkLoadingGlobal.length; i++) webpackJsonpCallback(chunkLoadingGlobal[i]);
/******/ return (checkDeferredModules = checkDeferredModulesImpl)();
/******/ };
/******/
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var executeModules = data[2];
/******/ var runtime = data[3];
/******/ var webpackJsonpCallback = (data) => {
/******/ var [chunkIds, moreModules, runtime, executeModules] = data;
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
Expand All @@ -127,7 +126,7 @@ document.body.appendChild(h1);
/******/ }
/******/ }
/******/ if(runtime) runtime(__webpack_require__);
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/ parentChunkLoadingFunction(data);
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
Expand All @@ -137,12 +136,11 @@ document.body.appendChild(h1);
/******/
/******/ // run deferred modules when all chunks ready
/******/ return checkDeferredModules();
/******/ };
/******/ }
/******/
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
/******/ jsonpArray.push = webpackJsonpCallback;
/******/ var parentJsonpFunction = oldJsonpFunction;
/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
/******/ var parentChunkLoadingFunction = chunkLoadingGlobal.push.bind(chunkLoadingGlobal);
/******/ chunkLoadingGlobal.push = webpackJsonpCallback;
/******/ })();
/******/
/************************************************************************/
Expand Down
2 changes: 1 addition & 1 deletion examples/chunk-optimization/dist/webpack-5/entryB.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
24 changes: 11 additions & 13 deletions examples/chunk-optimization/dist/webpack-5/entryB.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ document.body.appendChild(h1);
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // Promise = chunk loading, 0 = chunk loaded
Expand Down Expand Up @@ -99,17 +101,14 @@ document.body.appendChild(h1);
/******/ __webpack_require__.x = () => {
/******/
/******/ }
/******/ jsonpArray = jsonpArray.slice();
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/ chunkLoadingGlobal = chunkLoadingGlobal.slice();
/******/ for(var i = 0; i < chunkLoadingGlobal.length; i++) webpackJsonpCallback(chunkLoadingGlobal[i]);
/******/ return (checkDeferredModules = checkDeferredModulesImpl)();
/******/ };
/******/
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var executeModules = data[2];
/******/ var runtime = data[3];
/******/ var webpackJsonpCallback = (data) => {
/******/ var [chunkIds, moreModules, runtime, executeModules] = data;
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
Expand All @@ -126,7 +125,7 @@ document.body.appendChild(h1);
/******/ }
/******/ }
/******/ if(runtime) runtime(__webpack_require__);
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/ parentChunkLoadingFunction(data);
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
Expand All @@ -136,12 +135,11 @@ document.body.appendChild(h1);
/******/
/******/ // run deferred modules when all chunks ready
/******/ return checkDeferredModules();
/******/ };
/******/ }
/******/
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
/******/ jsonpArray.push = webpackJsonpCallback;
/******/ var parentJsonpFunction = oldJsonpFunction;
/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
/******/ var parentChunkLoadingFunction = chunkLoadingGlobal.push.bind(chunkLoadingGlobal);
/******/ chunkLoadingGlobal.push = webpackJsonpCallback;
/******/ })();
/******/
/************************************************************************/
Expand Down
2 changes: 1 addition & 1 deletion examples/chunk-optimization/dist/webpack-5/entryC.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/chunk-optimization/dist/webpack-5/libMath.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[494],{
(self["webpackChunk"] = self["webpackChunk"] || []).push([[494],{

/***/ 179:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
Expand Down
2 changes: 1 addition & 1 deletion examples/chunk-optimization/dist/webpack-5/libText.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[491],{
(self["webpackChunk"] = self["webpackChunk"] || []).push([[491],{

/***/ 631:
/***/ ((module) => {
Expand Down
4 changes: 2 additions & 2 deletions examples/custom-insertion-position/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script>
<title>Custom insertion example</title>
</head>
<body>
All scripts are placed here:
<script src="bundle.js"></script>

<script>console.log("Executed after all other scripts")</script>
</body>
</html>
2 changes: 1 addition & 1 deletion examples/custom-template/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/default/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/favicon/dist/webpack-5/favicon.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/html-loader/dist/webpack-5/about.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/html-loader/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/javascript-advanced/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -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>
<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>
2 changes: 1 addition & 1 deletion examples/javascript/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -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>
<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">
2 changes: 1 addition & 1 deletion examples/pug-loader/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/sort-manually/dist/webpack-5/first-file.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/sort-manually/dist/webpack-5/second-file.html
Original file line number Diff line number Diff line change
@@ -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>
<!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>
2 changes: 1 addition & 1 deletion examples/template-parameters/dist/webpack-5/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html><head><meta charset="utf-8"><title>bar</title></head><body><script src="bundle.js"></script></body></html>
<!doctype html><html><head><meta charset="utf-8"><title>bar</title><script defer="defer" src="bundle.js"></script></head><body></body></html>
7 changes: 4 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ class HtmlWebpackPlugin {
filename: 'index.html',
publicPath: userOptions.publicPath === undefined ? 'auto' : userOptions.publicPath,
hash: false,
inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head',
scriptLoading: 'blocking',
inject: userOptions.scriptLoading === 'blocking' ? 'body' : 'head',
scriptLoading: 'defer',
compile: true,
favicon: false,
minify: 'auto',
Expand Down Expand Up @@ -251,7 +251,8 @@ function hookIntoCompiler (compiler, options, plugin) {
}))
.then(({ assetTags }) => {
// Inject scripts to body unless it set explicitly to head
const scriptTarget = options.inject === 'head' ? 'head' : 'body';
const scriptTarget = options.inject === 'head' ||
(options.inject === false && options.scriptLoading !== 'blocking') ? 'head' : 'body';
// Group assets to `head` and `body` tag arrays
const assetGroups = generateAssetGroups(assetTags, scriptTarget);
// Allow third-party-plugin authors to reorder and change the assetTags once they are grouped
Expand Down
Loading

0 comments on commit 35b6b87

Please sign in to comment.