From de315eb98497f3e5f517d59dbbe120b48c9b8db9 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Tue, 17 Mar 2020 13:54:18 +0100 Subject: [PATCH] feat: Add defer script loading --- README.md | 1 + index.js | 4 +++- spec/basic.spec.js | 30 ++++++++++++++++++++++++++++++ typings.d.ts | 12 +++++++++++- 4 files changed, 45 insertions(+), 2 deletions(-) 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 */