feat: Add defer script loading

jantimon · Mar 17, 2020 · de315eb · de315eb
1 parent 7df269f
commit de315eb
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git 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
@@ -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
@@ -2252,4 +2252,34 @@ describe('HtmlWebpackPlugin', () => {
       })]
     }, [/<!doctype html>\s+<html>\s+<head>\s+<meta charset="utf-8">/], 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'
+
+      })]
+    }, [/<script defer="defer" .+<body>/], null, done);
+  });
+
+  it('should allow to inject scripts with a defer attribute to the body', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js'
+      },
+      plugins: [new HtmlWebpackPlugin({
+        scriptLoading: 'defer',
+        inject: 'body'
+      })]
+    }, [/<body>.*<script defer="defer"/], null, done);
+  });
 });
diff --git a/typings.d.ts b/typings.d.ts
@@ -62,7 +62,17 @@ declare namespace HtmlWebpackPlugin {
       | false // Don't inject scripts
       | true // Inject scripts into body
       | "body" // Inject scripts into body
-      | "head"; // Inject scripts into head
+      | "head" // Inject scripts into head
+    /**
+     * Set up script loading
+     * blocking will result in <script src="..."></script>
+     * defer will result in <script defer src="..."></script>
+     *
+     * The default behaviour is blocking
+     */
+    scriptLoading:
+      | "blocking"
+      | "defer"
     /**
      * Inject meta tags
      */