diff --git a/README.md b/README.md
index 0c78ee3a..7ca0dae4 100644
--- a/README.md
+++ b/README.md
@@ -146,6 +146,7 @@ Allowed values are as follows
|**`template`**|`{String}`|``|`webpack` relative or absolute path to the template. By default it will use `src/index.ejs` if it exists. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details|
|**`templateParameters`**|`{Boolean\|Object\|Function}`|``| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
|**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
+|**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
|**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
|**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
|**`base`**|`{Object\|String\|false}`|`false`|Inject a [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag. E.g. `base: "https://example.com/path/page.html`|
diff --git a/index.js b/index.js
index 50e7e917..2b4af9d9 100644
--- a/index.js
+++ b/index.js
@@ -43,7 +43,8 @@ class HtmlWebpackPlugin {
templateParameters: templateParametersGenerator,
filename: 'index.html',
hash: false,
- inject: true,
+ inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head',
+ scriptLoading: 'blocking',
compile: true,
favicon: false,
minify: 'auto',
@@ -701,6 +702,7 @@ class HtmlWebpackPlugin {
tagName: 'script',
voidTag: false,
attributes: {
+ defer: this.options.scriptLoading !== 'blocking',
src: scriptAsset
}
}));
diff --git a/spec/basic.spec.js b/spec/basic.spec.js
index 69dba5b2..571fe149 100644
--- a/spec/basic.spec.js
+++ b/spec/basic.spec.js
@@ -2252,4 +2252,34 @@ describe('HtmlWebpackPlugin', () => {
})]
}, [/\s+\s+\s+/], null, done);
});
+
+ it('should allow to inject scripts with a defer attribute', done => {
+ testHtmlPlugin({
+ mode: 'production',
+ entry: path.join(__dirname, 'fixtures/index.js'),
+ output: {
+ path: OUTPUT_DIR,
+ filename: 'index_bundle.js'
+ },
+ plugins: [new HtmlWebpackPlugin({
+ scriptLoading: 'defer'
+
+ })]
+ }, [/
+ * defer will result in
+ *
+ * The default behaviour is blocking
+ */
+ scriptLoading:
+ | "blocking"
+ | "defer"
/**
* Inject meta tags
*/