diff --git a/CHANGES.md b/CHANGES.md
index 867574a86..1d60ce32e 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -18,10 +18,12 @@
 -   pat tooltip: Remove undocumented "souce: auto" parameter. This parameter should not be used as it is not explicit enough and would lead to unintuitive behavior.
 -   Remove outdated pre IE9 browser compatibility polyfill `core/compat`.
 -   Remove unused `lib/htmlparser`.
+-   Remove obsolete library `prefixfree`.
 
 
 ### Features
 
+-   Implenent lazy loading for external libraries via dynamic imports. Leads to significantly reduced bundle sizes.
 -   Upgrade pat-calendar to use lates fullcalendar version (5.3.0).
 -   pat tooltip: Use tippy v6 based implementation.
 
diff --git a/index.html b/index.html
index f754b99e9..e7c90f4bb 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Patterns demo pages</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/package.json b/package.json
index 54671d842..c3a20bea4 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "moment-timezone": "^0.5.31",
     "photoswipe": "^4.1.3",
     "pikaday": "^1.8.0",
-    "prefixfree": "^1.0.0",
     "promise-polyfill": "^8.1.0",
     "screenfull": "^5.0.0",
     "select2": "^3.5.1",
diff --git a/src/core/push_kit.js b/src/core/push_kit.js
index 27119920a..077214c66 100644
--- a/src/core/push_kit.js
+++ b/src/core/push_kit.js
@@ -28,23 +28,27 @@
  * - patterns-push-login containing the name of a read only user on the message queue server used to connect.
  * - patterns-push-password containing the password of a read only user on the message queue server used to connect.
  */
-
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
-import { Client } from "@stomp/stompjs";
+
+// Lazy loading modules.
+let StompJS;
 
 const push_kit = {
-    init() {
+    async init() {
         const push_url = $("meta[name=patterns-push-server-url]").attr("content"); // prettier-ignore
         const push_exchange = $("meta[name=patterns-push-exchange-base-name]").attr("content"); // prettier-ignore
-        const push_user_id = $("meta[name=patterns-push-user-id]").attr("content"); // prettier-ignore
-        const push_login = $("meta[name=patterns-push-login]").attr("content"); // prettier-ignore
-        const push_pass = $("meta[name=patterns-push-password]").attr("content"); // prettier-ignore
 
         if (!push_url || !push_exchange) {
             return;
         }
 
-        const client = new Client({
+        const push_user_id = $("meta[name=patterns-push-user-id]").attr("content"); // prettier-ignore
+        const push_login = $("meta[name=patterns-push-login]").attr("content"); // prettier-ignore
+        const push_pass = $("meta[name=patterns-push-password]").attr("content"); // prettier-ignore
+
+        StompJS = await import("@stomp/stompjs");
+        const client = new StompJS.Client({
             brokerURL: push_url,
             connectHeaders: {
                 login: push_login,
diff --git a/src/pat/auto-scale/example-2.html b/src/pat/auto-scale/example-2.html
index 9f6454382..96ff90d59 100644
--- a/src/pat/auto-scale/example-2.html
+++ b/src/pat/auto-scale/example-2.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/auto-scale/index.html b/src/pat/auto-scale/index.html
index 4d999a3f5..25a734b6a 100644
--- a/src/pat/auto-scale/index.html
+++ b/src/pat/auto-scale/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto scale</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/auto-submit/index.html b/src/pat/auto-submit/index.html
index f1b791155..daba510f2 100644
--- a/src/pat/auto-submit/index.html
+++ b/src/pat/auto-submit/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto submit</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/auto-submit/test.html b/src/pat/auto-submit/test.html
index a0c957132..424877b0a 100644
--- a/src/pat/auto-submit/test.html
+++ b/src/pat/auto-submit/test.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Auto submit</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/auto-suggest/auto-suggest.js b/src/pat/auto-suggest/auto-suggest.js
index bca4bcf05..8751230f0 100644
--- a/src/pat/auto-suggest/auto-suggest.js
+++ b/src/pat/auto-suggest/auto-suggest.js
@@ -5,11 +5,11 @@
  * Copyright 2012 JC Brand
  * Copyright 2013 Marko Durkovic
  */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
 import registry from "../../core/registry";
-import "select2";
 
 var log = logging.getLogger("autosuggest");
 var parser = new Parser("autosuggest");
@@ -44,7 +44,9 @@ parser.addAlias("pre-fill", "prefill");
 var _ = {
     name: "autosuggest",
     trigger: ".pat-autosuggest,.pat-auto-suggest",
-    init: function ($el, opts) {
+    async init($el, opts) {
+        await import("select2");
+
         if ($el.length > 1) {
             return $el.each(function () {
                 _.init($(this), opts);
diff --git a/src/pat/auto-suggest/auto-suggest.test.js b/src/pat/auto-suggest/auto-suggest.test.js
index 976e5c24f..48ebfd5e6 100644
--- a/src/pat/auto-suggest/auto-suggest.test.js
+++ b/src/pat/auto-suggest/auto-suggest.test.js
@@ -1,7 +1,8 @@
-import pattern from "./auto-suggest";
 import $ from "jquery";
+import pattern from "./auto-suggest";
+import utils from "../../core/utils";
 
-var utils = {
+var testutils = {
     createInputElement: function (c) {
         var cfg = c || {};
         return $("<input/>", {
@@ -34,138 +35,109 @@ var utils = {
 };
 
 describe("pat-autosuggest", function () {
-    describe("An ordinary <input> element", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
+    beforeEach(function () {
+        $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
+        $("<div/>", { id: "lab" }).appendTo(document.body);
+    });
 
-        afterEach(function () {
-            $("#lab").remove();
-        });
+    afterEach(function () {
+        $("#lab").remove();
+        jest.restoreAllMocks();
+    });
 
-        it("gets converted into a select2 widget", function () {
-            utils.createInputElement();
+    describe("An ordinary <input> element", function () {
+        it("gets converted into a select2 widget", async function () {
+            testutils.createInputElement();
             var $el = $("input.pat-autosuggest");
 
             expect($(".select2-container").length).toBe(0);
             expect($el.hasClass("select2-offscreen")).toBeFalsy();
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($el.hasClass("select2-offscreen")).toBeTruthy();
             expect($(".select2-container").length).toBe(1);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("An <input> element with an ajax option", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("keeps the ajax option when turning into a select2 widget", function () {
-            utils.createInputElement({
+        it("keeps the ajax option when turning into a select2 widget", async function () {
+            testutils.createInputElement({
                 data: "ajax-url: http://test.org/test",
             });
             var $el = $("input.pat-autosuggest");
             spyOn($el, "select2");
 
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($el.select2.calls.mostRecent().args[0].ajax).toBeDefined();
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("A <select> element", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("gets converted into a select2 widget", function () {
-            utils.createSelectElement();
+        it("gets converted into a select2 widget", async function () {
+            testutils.createSelectElement();
             var $el = $("select.pat-autosuggest");
             expect($(".select2-container").length).toBe(0);
             expect($el.hasClass("select2-offscreen")).toBeFalsy();
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($el.hasClass("select2-offscreen")).toBeTruthy();
             expect($(".select2-container").length).toBe(1);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("Selected items", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("can be given custom CSS classes", function () {
-            utils.createInputElement({
+        it("can be given custom CSS classes", async function () {
+            testutils.createInputElement({
                 data:
                     'words: apple,orange,pear; pre-fill: orange; selection-classes: {"orange": ["fruit", "orange"]}',
             });
             var $el = $("input.pat-autosuggest");
             expect($(".select2-search-choice").length).toBe(0);
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($(".select2-search-choice").length).toBe(1);
             expect($(".select2-search-choice").hasClass("fruit")).toBeTruthy();
             expect($(".select2-search-choice").hasClass("orange")).toBeTruthy();
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
 
-        it("can be restricted to a certain amount", function () {
+        it("can be restricted to a certain amount", async function () {
             // First check without limit
-            utils.createInputElement({
+            testutils.createInputElement({
                 data: "words: apple,orange,pear; pre-fill: orange",
             });
             expect($(".select2-input").length).toBe(0);
             pattern.init($("input.pat-autosuggest"));
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($(".select2-input").length).toBe(1);
             expect($(".select2-selection-limit").length).toBe(0);
             $(".select2-input").val("apple").click();
             expect($(".select2-selection-limit").length).toBe(0);
-            utils.removeSelect2();
+            testutils.removeSelect2();
 
             // Then with limit
-            utils.createInputElement({
+            testutils.createInputElement({
                 data:
                     "maximum-selection-size: 1; words: apple,orange,pear; pre-fill: orange",
             });
             expect($(".select2-input").length).toBe(0);
             pattern.init($("input.pat-autosuggest"));
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($(".select2-input").length).toBe(1);
             expect($(".select2-selection-limit").length).toBe(0);
             $(".select2-input").val("apple").click();
             // Now we have a select style control. It has a close button
             expect($(".select2-search-choice-close").length).toBe(1);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 
     describe("Placeholder tests", function () {
-        beforeEach(function () {
-            $("div#lab").remove(); // Looks likes some specs don't clean up after themselves.
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("A placeholder on the original element is reused on the auto-suggest element", function () {
+        it("A placeholder on the original element is reused on the auto-suggest element", async function () {
             var placeholder = "Test placeholder";
 
             $("<input/>", {
@@ -178,13 +150,14 @@ describe("pat-autosuggest", function () {
 
             expect($el.prop("placeholder")).toBe(placeholder);
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             // XXX Placeholder is used as value of the input field.
             // Change this as soon Select2 changes this odd behavior.
             expect($(".select2-input").val()).toBe(placeholder);
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
 
-        it("No placeholder doesn't create an automatic one.", function () {
+        it("No placeholder doesn't create an automatic one.", async function () {
             $("<input/>", {
                 id: "select2",
                 class: "pat-autosuggest",
@@ -194,10 +167,11 @@ describe("pat-autosuggest", function () {
 
             expect($el.prop("placeholder")).toBe("");
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             // XXX Placeholder is used as value of the input field.
             // Change this as soon Select2 changes this odd behavior.
             expect($(".select2-input").val()).toBe("");
-            utils.removeSelect2();
+            testutils.removeSelect2();
         });
     });
 });
diff --git a/src/pat/auto-suggest/index.html b/src/pat/auto-suggest/index.html
index 217d89524..dafec5872 100644
--- a/src/pat/auto-suggest/index.html
+++ b/src/pat/auto-suggest/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/autofocus/index.html b/src/pat/autofocus/index.html
index f9da78c5d..bf7b7237a 100644
--- a/src/pat/autofocus/index.html
+++ b/src/pat/autofocus/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Focus demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/bumper/index.html b/src/pat/bumper/index.html
index cb5958104..b2e847d40 100644
--- a/src/pat/bumper/index.html
+++ b/src/pat/bumper/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/calendar/calendar-sources.html b/src/pat/calendar/calendar-sources.html
index b85a88cef..f0b73af4e 100644
--- a/src/pat/calendar/calendar-sources.html
+++ b/src/pat/calendar/calendar-sources.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/calendar/calendar.js b/src/pat/calendar/calendar.js
index b93041292..a5dde2b3d 100644
--- a/src/pat/calendar/calendar.js
+++ b/src/pat/calendar/calendar.js
@@ -5,6 +5,7 @@
  * Copyright 2014 Florian Friesdorf
  * Copyright 2014 Syslab.com GmbH
  */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
@@ -12,8 +13,9 @@ import store from "../../core/store";
 import utils from "../../core/utils";
 import registry from "../../core/registry";
 import _ from "underscore";
-import momentTz from "./moment-timezone-with-data-2010-2020";
-import "fullcalendar";
+
+// Lazy loading modules.
+let MomentTZData;
 
 var log = logging.getLogger("calendar"),
     parser = new Parser("calendar");
@@ -78,20 +80,18 @@ var calendar = {
         return context;
     },
 
-    init: function ($elem, opts) {
+    async init($elem, opts) {
+        MomentTZData = await import("./moment-timezone-with-data-2010-2020");
+        await import("fullcalendar");
+
         var lang = document
             .getElementsByTagName("html")[0]
             .getAttribute("lang");
         if (lang && lang != "en" && lang != null) {
             // we don't support any country-specific language variants, always use first 2 letters
             lang = lang.substr(0, 2).toLowerCase();
-            import(
-                /* webpackChunkName: "fullcalendar" */ "fullcalendar/dist/lang/" +
-                    lang +
-                    ".js"
-            ).then(() => {
-                console.log("loaded cal locale for " + lang);
-            });
+            await import(`fullcalendar/dist/lang/${lang}.js`);
+            console.log("loaded cal locale for " + lang);
         }
 
         opts = opts || {};
@@ -152,7 +152,7 @@ var calendar = {
             events: function (start, end, timezone, callback) {
                 var events = calendar.parseEvents($el, timezone);
                 callback(events);
-            },
+            }.bind(this),
             eventAfterRender: function (ev, $event) {
                 var url = "";
                 if (ev.id === "pat-calendar-new-event") {
@@ -599,66 +599,68 @@ var calendar = {
                     return $event.hasClass(this);
                 }).length;
             })
-            .map(function (idx, event) {
-                var attr, i;
-                // classNames: all event classes without "event" + anchor classes
-                var classNames = $(event)
-                    .attr("class")
-                    .split(/\s+/)
-                    .filter(function (cls) {
-                        return cls !== "cal-event";
-                    })
-                    .concat($("a", event).attr("class").split(/\s+/));
-                // attrs: all "data-" attrs from anchor
-                var allattrs = $("a", event)[0].attributes,
-                    attrs = {};
-                for (attr, i = 0; i < allattrs.length; i++) {
-                    attr = allattrs.item(i);
-                    if (attr.nodeName.slice(0, 5) === "data-") {
-                        attrs[attr.nodeName] = attr.nodeValue;
+            .map(
+                function (idx, event) {
+                    var attr, i;
+                    // classNames: all event classes without "event" + anchor classes
+                    var classNames = $(event)
+                        .attr("class")
+                        .split(/\s+/)
+                        .filter(function (cls) {
+                            return cls !== "cal-event";
+                        })
+                        .concat($("a", event).attr("class").split(/\s+/));
+                    // attrs: all "data-" attrs from anchor
+                    var allattrs = $("a", event)[0].attributes,
+                        attrs = {};
+                    for (attr, i = 0; i < allattrs.length; i++) {
+                        attr = allattrs.item(i);
+                        if (attr.nodeName.slice(0, 5) === "data-") {
+                            attrs[attr.nodeName] = attr.nodeValue;
+                        }
                     }
-                }
 
-                var location = ($(".location", event).html() || "").trim();
-
-                var startstr = $(".start", event).attr("datetime"),
-                    endstr = $(".end", event).attr("datetime"),
-                    start = momentTz.parseZone(startstr),
-                    end = momentTz.parseZone(endstr),
-                    allday = $(event).hasClass("all-day");
-                if (allday) {
-                    // XXX: In fullcalendar 2 the end-date is no longer inclusive, but
-                    // it should be. We fix that by adding a day so that the
-                    // pat-calendar API stays the same and stays intuitive.
-                    end.add(1, "days");
-                }
-                if (timezone) {
-                    start = start.tz(timezone);
-                    end = end.tz(timezone);
-                }
-                var ev = {
-                    title:
-                        $(".title", event).text().trim() +
-                        (location ? " (" + location + ")" : ""),
-                    start: start.format(),
-                    end: end.format(),
-                    allDay: allday,
-                    url: $("a", event).attr("href"),
-                    className: classNames,
-                    attrs: attrs,
-                    editable: $(event).hasClass("editable"),
-                };
-                if (!ev.title) {
-                    log.error("No event title for:", event);
-                }
-                if (!ev.start) {
-                    log.error("No event start for:", event);
-                }
-                if (!ev.url) {
-                    log.error("No event url for:", event);
-                }
-                return ev;
-            })
+                    var location = ($(".location", event).html() || "").trim();
+
+                    var startstr = $(".start", event).attr("datetime"),
+                        endstr = $(".end", event).attr("datetime"),
+                        start = MomentTZData.parseZone(startstr),
+                        end = MomentTZData.parseZone(endstr),
+                        allday = $(event).hasClass("all-day");
+                    if (allday) {
+                        // XXX: In fullcalendar 2 the end-date is no longer inclusive, but
+                        // it should be. We fix that by adding a day so that the
+                        // pat-calendar API stays the same and stays intuitive.
+                        end.add(1, "days");
+                    }
+                    if (timezone) {
+                        start = start.tz(timezone);
+                        end = end.tz(timezone);
+                    }
+                    var ev = {
+                        title:
+                            $(".title", event).text().trim() +
+                            (location ? " (" + location + ")" : ""),
+                        start: start.format(),
+                        end: end.format(),
+                        allDay: allday,
+                        url: $("a", event).attr("href"),
+                        className: classNames,
+                        attrs: attrs,
+                        editable: $(event).hasClass("editable"),
+                    };
+                    if (!ev.title) {
+                        log.error("No event title for:", event);
+                    }
+                    if (!ev.start) {
+                        log.error("No event start for:", event);
+                    }
+                    if (!ev.url) {
+                        log.error("No event url for:", event);
+                    }
+                    return ev;
+                }.bind(this)
+            )
             .toArray();
 
         return events;
diff --git a/src/pat/calendar/calendar.test.js b/src/pat/calendar/calendar.test.js
index cfaed604a..f685e3484 100644
--- a/src/pat/calendar/calendar.test.js
+++ b/src/pat/calendar/calendar.test.js
@@ -1,5 +1,6 @@
 import pattern from "./calendar";
 import $ from "jquery";
+import utils from "../../core/utils";
 
 describe("pat-calendar", function () {
     beforeEach(function () {
@@ -13,7 +14,7 @@ describe("pat-calendar", function () {
     // This is clearly a stub!
 
     describe("init", function () {
-        it("Initialise the fullcalendar", function () {
+        it("Initialise the fullcalendar", async function () {
             // currently, store cannot be none
             $("#lab").html(
                 [
@@ -23,6 +24,7 @@ describe("pat-calendar", function () {
             );
             var $calendar = $("#lab .pat-calendar");
             pattern.init($calendar);
+            await utils.timeout(1); // wait a tick for async to settle.
             var fc_view = $calendar.find("div.fc-view");
             expect(fc_view.length).toBe(1);
         });
diff --git a/src/pat/calendar/index.html b/src/pat/calendar/index.html
index 16ab59db6..039b0d1dc 100644
--- a/src/pat/calendar/index.html
+++ b/src/pat/calendar/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/carousel/carousel.js b/src/pat/carousel/carousel.js
index d77c1e89b..eaec23f67 100644
--- a/src/pat/carousel/carousel.js
+++ b/src/pat/carousel/carousel.js
@@ -3,12 +3,12 @@
  *
  * Copyright 2017 Syslab.com GmbH Alexander Pilz
  */
-
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
-import registry from "../../core/registry";
+import Base from "../../core/base";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
-import "slick-carousel";
+import utils from "../../core/utils";
 
 var log = logging.getLogger("pat.carousel"),
     parser = new Parser("carousel");
@@ -24,68 +24,73 @@ parser.addArgument("dots", "show");
 parser.addArgument("append-dots", "");
 parser.addArgument("infinite", false);
 
-var carousel = {
+export default Base.extend({
     name: "carousel",
     trigger: ".pat-carousel",
 
-    init: function ($el, opts) {
-        return $el.each(function () {
-            var $carousel = $(this),
-                options = parser.parse($carousel, opts),
-                settings = {};
+    async init(el, opts) {
+        await import("slick-carousel");
 
-            settings.autoplay = options.auto.play;
-            settings.autoplaySpeed = options.auto["play-speed"];
-            settings.speed = options.speed;
-            settings.adaptiveHeight = options.height === "adaptive";
-            settings.arrows = options.arrows === "show";
-            settings.slidesToShow = options.slides["to-show"];
-            settings.slidesToScroll = options.slides["to-scroll"];
-            settings.dots = options.dots === "show";
-            if (options.appendDots) {
-                settings.appendDots = options.appendDots;
-            }
-            settings.infinite = options.infinite;
-            carousel.setup($carousel, settings);
-        });
+        if (el.jquery) {
+            el = el[0];
+        }
+        const options = parser.parse(el, opts);
+        const settings = {};
+
+        settings.autoplay = options.auto.play;
+        settings.autoplaySpeed = options.auto["play-speed"];
+        settings.speed = options.speed;
+        settings.adaptiveHeight = options.height === "adaptive";
+        settings.arrows = options.arrows === "show";
+        settings.slidesToShow = options.slides["to-show"];
+        settings.slidesToScroll = options.slides["to-scroll"];
+        settings.dots = options.dots === "show";
+        if (options.appendDots) {
+            settings.appendDots = options.appendDots;
+        }
+        settings.infinite = options.infinite;
+
+        this.setup(el, settings);
     },
 
-    setup: function ($el, settings) {
-        var loaded = true,
-            $images = $el.find("img"),
-            img,
-            i;
-        for (i = 0; loaded && i < $images.length; i++) {
-            img = $images[i];
-            if (!img.complete || img.naturalWidth === 0) loaded = false;
+    async setup(el, settings) {
+        let loaded = true;
+        const images = el.querySelectorAll("img");
+        for (let img of images) {
+            if (!img.complete || img.naturalWidth === 0) {
+                loaded = false;
+            }
         }
         if (!loaded) {
             log.debug("Delaying carousel setup until images have loaded.");
-            setTimeout(function () {
-                carousel.setup($el, settings);
-            }, 50);
+            await utils.timeout(50);
+            this.setup(el, settings);
             return;
         }
-        var $carousel = $el.slick(settings),
-            $panel_links = $();
+        const $carousel = $(el).slick(settings);
+        let $panel_links = $();
 
         $carousel
             .children()
-            .each(function (index) {
-                if (!this.id) return;
-
-                var $links = $("a[href=#" + this.id + "]");
+            .each((index, obj) => {
+                if (!obj.id) {
+                    return;
+                }
+                var $links = $("a[href=#" + obj.id + "]");
                 // TODO: fix this.
                 // eslint-disable-next-line no-undef
-                if (index === control.currentPage) $links.addClass("current");
-                else $links.removeClass("current");
+                if (index === control.currentPage) {
+                    $links.addClass("current");
+                } else {
+                    $links.removeClass("current");
+                }
                 $links.on(
                     "click.pat-carousel",
                     null,
                     // TODO: fix this.
                     // eslint-disable-next-line no-undef
                     { control: control, index: index },
-                    carousel.onPanelLinkClick
+                    this.onPanelLinkClick.bind(this)
                 );
                 $panel_links = $panel_links.add($links);
             })
@@ -94,20 +99,20 @@ var carousel = {
                 "slide_complete.pat-carousel",
                 null,
                 $panel_links,
-                carousel.onSlideComplete
+                this.onSlideComplete.bind(this)
             );
     },
 
-    _loadPanelImages: function (slider, page) {
-        var $img;
+    _loadPanelImages(slider, page) {
+        let $img;
         log.info("Loading lazy images on panel " + page);
         slider.$items
             .eq(page)
             .find("img")
             .addBack()
             .filter("[data-src]")
-            .each(function () {
-                $img = $(this);
+            .each((idx, img) => {
+                $img = $(img);
                 this.src = $img.attr("data-src");
                 $img.removeAttr("data-src");
             });
@@ -119,14 +124,16 @@ var carousel = {
     },
 
     onInitialized: function (event, slider) {
-        carousel._loadPanelImages(slider, slider.options.startPanel);
-        carousel._loadPanelImages(slider, slider.options.startPanel + 1);
-        carousel._loadPanelImages(slider, 0);
-        carousel._loadPanelImages(slider, slider.pages + 1);
+        debugger;
+        this._loadPanelImages(slider, slider.options.startPanel);
+        this._loadPanelImages(slider, slider.options.startPanel + 1);
+        this._loadPanelImages(slider, 0);
+        this._loadPanelImages(slider, slider.pages + 1);
     },
 
     onSlideInit: function (event, slider) {
-        carousel._loadPanelImages(slider, slider.targetPage);
+        debugger;
+        this._loadPanelImages(slider, slider.targetPage);
     },
 
     onSlideComplete: function (event, slider) {
@@ -136,9 +143,6 @@ var carousel = {
             $panel_links
                 .filter("[href=#" + slider.$targetPage[0].id + "]")
                 .addClass("current");
-        carousel._loadPanelImages(slider, slider.targetPage + 1);
+        this._loadPanelImages(slider, slider.targetPage + 1);
     },
-};
-
-registry.register(carousel);
-export default carousel;
+});
diff --git a/src/pat/carousel/carousel.test.js b/src/pat/carousel/carousel.test.js
index 947ad8b13..bdc42b1bf 100644
--- a/src/pat/carousel/carousel.test.js
+++ b/src/pat/carousel/carousel.test.js
@@ -1,5 +1,6 @@
-import pattern from "./carousel";
 import $ from "jquery";
+import pattern from "./carousel";
+import utils from "../../core/utils";
 
 describe("carousel-plugin", function () {
     beforeEach(function () {
@@ -8,21 +9,30 @@ describe("carousel-plugin", function () {
 
     afterEach(function () {
         $("#lab").remove();
+        jest.restoreAllMocks();
     });
 
     describe("init", function () {
-        it("Default options", function () {
+        it("Default options", async () => {
             $("#lab").html(
                 "<ul class='pat-carousel'>" +
                     "  <li>Panel 1</li>" +
                     "  <li>Panel 2</li>" +
                     "</ul>"
             );
+
+            pattern.init(document.createElement("div")); // Just to async-load slick before initializing the spy.
+            await utils.timeout(1); // wait a tick for async to settle.
+
             var $carousel = $("#lab ul");
-            var spy_slick = spyOn($.fn, "slick").and.callThrough();
+            var spy_slick = jest.spyOn($.fn, "slick");
+
             pattern.init($carousel);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             expect(spy_slick).toHaveBeenCalled();
-            var options = $.fn.slick.calls.argsFor(0)[0];
+
+            var options = spy_slick.mock.calls[0][0];
             expect(options.autoplay).toBe(false);
             expect(options.autoplaySpeed).toBe(1000);
             expect(options.speed).toBe(500);
@@ -34,7 +44,7 @@ describe("carousel-plugin", function () {
             expect(options.appendDots).toBe(undefined);
         });
 
-        it("Default options (DOM test)", function () {
+        it("Default options (DOM test)", async () => {
             $("#lab").html(
                 "<ul class='pat-carousel'>" +
                     "  <li>Panel 1</li>" +
@@ -43,15 +53,19 @@ describe("carousel-plugin", function () {
             );
             var $carousel = $("#lab ul");
             pattern.init($carousel);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             // has been initialized
             expect($carousel.hasClass("slick-initialized")).toBe(true);
+
             // arrows created
             expect($carousel.find(".slick-arrow").length).toBe(2);
+
             // No navigation boxes
             expect($carousel.find(".slick-dots").length).toBe(1);
         });
 
-        it("Tweak options via DOM", function () {
+        it("Tweak options via DOM", async () => {
             $("#lab").html(
                 "<ul class='pat-carousel' data-pat-carousel='auto-play: true; auto-play-speed: 345; height: adaptive'>" +
                     "  <li>Panel 1</li>" +
@@ -59,10 +73,12 @@ describe("carousel-plugin", function () {
                     "</ul>"
             );
             var $carousel = $("#lab ul");
-            var spy_slick = spyOn($.fn, "slick").and.callThrough();
+            var spy_slick = jest.spyOn($.fn, "slick");
             pattern.init($carousel);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             expect(spy_slick).toHaveBeenCalled();
-            var options = $.fn.slick.calls.argsFor(0)[0];
+            var options = spy_slick.mock.calls[0][0];
             expect(options.autoplay).toBe(true);
             expect(options.autoplaySpeed).toBe(345);
             expect(options.adaptiveHeight).toBe(true);
diff --git a/src/pat/carousel/index.html b/src/pat/carousel/index.html
index 306d1bd11..7989664e8 100644
--- a/src/pat/carousel/index.html
+++ b/src/pat/carousel/index.html
@@ -3,11 +3,6 @@
     <head>
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/checklist/index.html b/src/pat/checklist/index.html
index ea4525d52..5df36be34 100644
--- a/src/pat/checklist/index.html
+++ b/src/pat/checklist/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/clone/index.html b/src/pat/clone/index.html
index 3cd0b9a6f..b4268f9c6 100644
--- a/src/pat/clone/index.html
+++ b/src/pat/clone/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-clone demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/collapsible/index.html b/src/pat/collapsible/index.html
index 8b8372dc6..383a3b93e 100644
--- a/src/pat/collapsible/index.html
+++ b/src/pat/collapsible/index.html
@@ -5,11 +5,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/colour-picker/colour-picker.js b/src/pat/colour-picker/colour-picker.js
index f576262eb..4de1518ad 100644
--- a/src/pat/colour-picker/colour-picker.js
+++ b/src/pat/colour-picker/colour-picker.js
@@ -4,14 +4,14 @@
  * Copyright 2014 Marko Durkovic
  * Copyright 2014 Simplon B.V. - Wichert Akkerman
  */
-
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import registry from "../../core/registry";
-import "spectrum-colorpicker";
 
 var _ = {
     name: "polyfill-color",
     trigger: "input.pat-colour-picker,input.pat-color-picker",
-    init: function ($el) {
+    async init($el) {
+        await import("spectrum-colorpicker");
         return $el.spectrum({ preferredFormat: "hex" });
     },
 };
diff --git a/src/pat/colour-picker/index.html b/src/pat/colour-picker/index.html
index f953395b1..aa4dddb18 100644
--- a/src/pat/colour-picker/index.html
+++ b/src/pat/colour-picker/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-colour-picker demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/date-picker/date-picker.js b/src/pat/date-picker/date-picker.js
index 9364ee567..a46b7e8f6 100644
--- a/src/pat/date-picker/date-picker.js
+++ b/src/pat/date-picker/date-picker.js
@@ -1,11 +1,14 @@
 /* pat-date-picker  - Polyfill for input type=date */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import Parser from "../../core/parser";
 import Base from "../../core/base";
-import Pikaday from "pikaday";
-import moment from "moment";
 import utils from "../../core/utils";
 
+// Lazy loading modules.
+let Pikaday;
+let Moment;
+
 var parser = new Parser("date-picker");
 parser.addArgument("behavior", "styled", ["native", "styled"]);
 parser.addArgument("format", "YYYY-MM-DD");
@@ -25,12 +28,18 @@ parser.addAlias("behaviour", "behavior");
 export default Base.extend({
     name: "date-picker",
     trigger: ".pat-date-picker",
-    init: function () {
+    async init() {
         this.options = $.extend(parser.parse(this.$el), this.options);
         this.polyfill = this.options.behavior === "native";
         if (this.polyfill && utils.checkInputSupport("date", "invalid date")) {
             return;
         }
+
+        Pikaday = await import("pikaday");
+        Pikaday = Pikaday.default;
+        Moment = await import("moment");
+        Moment = Moment.default;
+
         if (this.$el.attr("type") === "date") {
             this.$el.attr("type", "text");
         }
@@ -41,7 +50,7 @@ export default Base.extend({
             firstDay: this.options.firstDay,
             showWeekNumber: this.options.weekNumbers === "show",
             toString: function (date, format) {
-                return moment(date).format(format);
+                return Moment(date).format(format);
             },
             onSelect: function () {
                 $(this._o.field).closest("form").trigger("input-change");
@@ -51,10 +60,10 @@ export default Base.extend({
         };
 
         if (this.$el.attr("min")) {
-            config.minDate = moment(this.$el.attr("min")).toDate();
+            config.minDate = Moment(this.$el.attr("min")).toDate();
         }
         if (this.$el.attr("max")) {
-            config.maxDate = moment(this.$el.attr("max")).toDate();
+            config.maxDate = Moment(this.$el.attr("max")).toDate();
         }
 
         if (this.options.i18n) {
diff --git a/src/pat/date-picker/date-picker.test.js b/src/pat/date-picker/date-picker.test.js
index 5b6a0873c..280c999f6 100644
--- a/src/pat/date-picker/date-picker.test.js
+++ b/src/pat/date-picker/date-picker.test.js
@@ -1,6 +1,7 @@
 import $ from "jquery";
 import i18ndata from "./i18n.json";
 import pattern from "./date-picker";
+import utils from "../../core/utils";
 
 describe("pat-date-picker", function () {
     beforeEach(function () {
@@ -12,13 +13,15 @@ describe("pat-date-picker", function () {
         //$('head link[href$="date-picker.css"').remove();
         $("input.pat-date-picker").remove();
         $(".pika-single, .pika-lendar").remove();
+        jest.restoreAllMocks();
     });
 
-    it("Default date picker.", function () {
+    it("Default date picker.", async function () {
         var $pika = $('<input type="date" class="pat-date-picker"/>').appendTo(
             document.body
         );
         pattern.init($pika);
+        await utils.timeout(1); // wait a tick for async to settle.
         $pika.click();
 
         var date = new Date();
@@ -52,11 +55,12 @@ describe("pat-date-picker", function () {
         ).toBe("Sun");
     });
 
-    it("Date picker starts at Monday.", function () {
+    it("Date picker starts at Monday.", async function () {
         var $pika = $(
             '<input type="date" class="pat-date-picker" data-pat-date-picker="first-day: 1" />'
         ).appendTo(document.body);
         pattern.init($pika);
+        await utils.timeout(1); // wait a tick for async to settle.
         $pika.click();
 
         expect(
@@ -65,11 +69,12 @@ describe("pat-date-picker", function () {
         ).toBe("Mon");
     });
 
-    it("Date picker with pre-set value.", function () {
+    it("Date picker with pre-set value.", async function () {
         var $pika = $(
             '<input type="date" class="pat-date-picker" value="1900-01-01"/>'
         ).appendTo(document.body);
         pattern.init($pika);
+        await utils.timeout(1); // wait a tick for async to settle.
         $pika.click();
 
         expect(
@@ -91,11 +96,12 @@ describe("pat-date-picker", function () {
         ).toBe("1");
     });
 
-    it("Date picker with week numbers.", function () {
+    it("Date picker with week numbers.", async function () {
         var $pika = $(
             '<input type="date" class="pat-date-picker" data-pat-date-picker="week-numbers: show;" value="2017-09-18"/>'
         ).appendTo(document.body);
         pattern.init($pika);
+        await utils.timeout(1); // wait a tick for async to settle.
         $pika.click();
 
         expect(
@@ -105,7 +111,7 @@ describe("pat-date-picker", function () {
 
     describe("Date picker with i18n", function () {
         describe("with proper json URL", function () {
-            it("properly localizes the months and weekdays", function () {
+            it("properly localizes the months and weekdays", async function () {
                 var $pika = $(
                     '<input type="date" class="pat-date-picker" value="2018-10-21" data-pat-date-picker="i18n:/path/to/i18njson" />'
                 ).appendTo(document.body);
@@ -126,6 +132,7 @@ describe("pat-date-picker", function () {
                     };
                 });
                 pattern.init($pika);
+                await utils.timeout(1); // wait a tick for async to settle.
                 $pika.click();
 
                 expect(
@@ -137,10 +144,11 @@ describe("pat-date-picker", function () {
         });
 
         describe("with bogus json URL", function () {
-            it("falls back to default (english) month and weekday labels ", function () {
+            it("falls back to default (english) month and weekday labels ", async function () {
                 var $pika = $(
                     '<input type="date" class="pat-date-picker" value="2018-10-21" data-pat-date-picker="i18n:/path/to/i18njson" />'
                 ).appendTo(document.body);
+                console.error = jest.fn(); // do not output error messages
                 // Simulate failing getJSON call
                 jest.spyOn($, "getJSON").mockImplementation(() => {
                     return {
@@ -158,6 +166,7 @@ describe("pat-date-picker", function () {
                     };
                 });
                 pattern.init($pika);
+                await utils.timeout(1); // wait a tick for async to settle.
                 $pika.click();
                 expect(
                     document.querySelector(
diff --git a/src/pat/date-picker/index.html b/src/pat/date-picker/index.html
index 6a6da0f53..a455b711f 100644
--- a/src/pat/date-picker/index.html
+++ b/src/pat/date-picker/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-date-picker demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/datetime-picker/datetime-picker.js b/src/pat/datetime-picker/datetime-picker.js
index bdc794bf3..a334bfca2 100644
--- a/src/pat/datetime-picker/datetime-picker.js
+++ b/src/pat/datetime-picker/datetime-picker.js
@@ -1,8 +1,11 @@
 /* pat-datetime-picker  - Polyfill for input type=datetime-local */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import Parser from "../../core/parser";
 import DatePicker from "../date-picker/date-picker";
-import moment from "moment";
+
+// Lazy loading modules.
+let Moment;
 
 var parser = new Parser("datetime-picker");
 parser.addArgument("behavior", "styled", ["native", "styled"]);
@@ -16,7 +19,10 @@ parser.addArgument("first-day", 0);
 export default DatePicker.extend({
     name: "datetime-picker",
     trigger: ".pat-datetime-picker",
-    init: function () {
+    async init() {
+        Moment = await import("moment");
+        Moment = Moment.default;
+
         this.options = $.extend(parser.parse(this.$el), this.options);
         var value = this.$el.val().split("T"),
             date_value = value[0] || "",
@@ -102,9 +108,9 @@ export default DatePicker.extend({
         this.$wrapper.insertAfter(this.$el);
     },
 
-    update: function () {
+    update() {
         if (this.$date.val() && this.$time.val()) {
-            var date = moment(this.$date.val()).format(this.options.format);
+            var date = Moment(this.$date.val()).format(this.options.format);
             this.$el.val(date + "T" + this.$time.val());
         } else {
             this.$el.val("");
@@ -112,7 +118,7 @@ export default DatePicker.extend({
         this.$el.trigger("change");
     },
 
-    isotime: function () {
+    isotime() {
         var now = new Date();
         return now.toTimeString().substr(0, 5);
     },
diff --git a/src/pat/datetime-picker/datetime-picker.test.js b/src/pat/datetime-picker/datetime-picker.test.js
index 4e11e71ae..0dd0913df 100644
--- a/src/pat/datetime-picker/datetime-picker.test.js
+++ b/src/pat/datetime-picker/datetime-picker.test.js
@@ -1,5 +1,6 @@
-import pattern from "./datetime-picker";
 import $ from "jquery";
+import pattern from "./datetime-picker";
+import utils from "../../core/utils";
 
 describe("pat-datetime-picker", function () {
     beforeEach(function () {
@@ -14,11 +15,12 @@ describe("pat-datetime-picker", function () {
         $(".pika-single, .pika-lendar").remove();
     });
 
-    it("Default datetime picker.", function () {
+    it("Default datetime picker.", async function () {
         var $el = $(
             '<input type="datetime-local" class="pat-datetime-picker"/>'
         ).appendTo(document.body);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
 
         $("input.date", $el.next()).click();
 
@@ -51,11 +53,12 @@ describe("pat-datetime-picker", function () {
         ).toBe("Sun");
     });
 
-    it("Date/Time picker starts at Monday.", function () {
+    it("Date/Time picker starts at Monday.", async function () {
         var $el = $(
             '<input type="date" class="pat-datetime-picker" data-pat-datetime-picker="first-day: 1" />'
         ).appendTo(document.body);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $("input.date", $el.next()).click();
 
         expect(
@@ -64,11 +67,12 @@ describe("pat-datetime-picker", function () {
         ).toBe("Mon");
     });
 
-    it("Date/Time picker with pre-set value.", function () {
+    it("Date/Time picker with pre-set value.", async function () {
         var $el = $(
             '<input type="datetime-local" class="pat-datetime-picker" value="1900-01-01T00:00"/>'
         ).appendTo(document.body);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
 
         $("input.date", $el.next()).click();
 
@@ -91,11 +95,12 @@ describe("pat-datetime-picker", function () {
         ).toBe("1");
     });
 
-    it("Date/Time picker with week numbers.", function () {
+    it("Date/Time picker with week numbers.", async function () {
         var $el = $(
             '<input type="datetime-local" class="pat-datetime-picker" data-pat-datetime-picker="week-numbers: show;" value="2017-09-18T23:42"/>'
         ).appendTo(document.body);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
 
         $("input.date", $el.next()).click();
 
@@ -105,7 +110,7 @@ describe("pat-datetime-picker", function () {
     });
 
     /* TODO: fix and properly mock with jasmine.Clock().mockTime in jasmine 2.x
-    it('Set Date/Time to today.', function () {
+    it('Set Date/Time to today.', async function () {
 
         var baseDate = new Date('2010-10-10T12:34:00.000Z');
 
@@ -125,6 +130,7 @@ describe("pat-datetime-picker", function () {
 
         var $el = $('<input type="datetime-local"/>').appendTo(document.body);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         var $wrapper = $el.next();
         var $date = $('input.date', $wrapper);
         var $time = $('input.time', $wrapper);
diff --git a/src/pat/datetime-picker/index.html b/src/pat/datetime-picker/index.html
index 2e761fbfc..ac2309d78 100644
--- a/src/pat/datetime-picker/index.html
+++ b/src/pat/datetime-picker/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-datetime-picker demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/depends/depends.js b/src/pat/depends/depends.js
index b52496e28..654d98e28 100644
--- a/src/pat/depends/depends.js
+++ b/src/pat/depends/depends.js
@@ -9,9 +9,11 @@ import $ from "jquery";
 import Base from "../../core/base";
 import utils from "../../core/utils";
 import logging from "../../core/logging";
-import DependsHandler from "../../lib/dependshandler";
 import Parser from "../../core/parser";
 
+// Lazy loading modules.
+let DependsHandler;
+
 var log = logging.getLogger("depends"),
     parser = new Parser("depends");
 
@@ -32,13 +34,16 @@ export default Base.extend({
         slide: { hide: "slideUp", show: "slideDown" },
     },
 
-    init: function ($el, opts) {
+    async init($el, opts) {
         const depdendent = this.$el[0];
         const options = parser.parse(this.$el, opts);
         let handler;
         let state;
         this.$modal = this.$el.parents(".pat-modal");
 
+        DependsHandler = await import("../../lib/dependshandler");
+        DependsHandler = DependsHandler.default;
+
         try {
             handler = new DependsHandler(this.$el, options.condition);
         } catch (e) {
@@ -101,7 +106,7 @@ export default Base.extend({
         }
     },
 
-    onReset: function (event) {
+    onReset(event) {
         const depdendents = $(event.target).data("patDepends.depdendents");
         setTimeout(() => {
             for (let depdendent of depdendents) {
@@ -111,7 +116,7 @@ export default Base.extend({
         }, 50);
     },
 
-    updateModal: function () {
+    updateModal() {
         /* If we're in a modal, make sure that it gets resized.
          */
         if (this.$modal.length) {
@@ -119,7 +124,7 @@ export default Base.extend({
         }
     },
 
-    enable: function () {
+    enable() {
         if (this.$el.is(":input")) this.$el[0].disabled = null;
         else if (this.$el.is("a")) this.$el.off("click.patternDepends");
         else if (this.$el.hasClass("pat-autosuggest")) {
@@ -133,7 +138,7 @@ export default Base.extend({
         this.$el.removeClass("disabled");
     },
 
-    disable: function () {
+    disable() {
         if (this.$el.is(":input")) this.$el[0].disabled = "disabled";
         else if (this.$el.is("a"))
             this.$el.on("click.patternDepends", this.blockDefault);
@@ -148,7 +153,7 @@ export default Base.extend({
         this.$el.addClass("disabled");
     },
 
-    onChange: function (event) {
+    onChange(event) {
         var handler = event.data.handler,
             options = event.data.options,
             depdendent = event.data.depdendent,
@@ -173,7 +178,7 @@ export default Base.extend({
         }
     },
 
-    blockDefault: function (event) {
+    blockDefault(event) {
         event.preventDefault();
     },
 });
diff --git a/src/pat/depends/depends.test.js b/src/pat/depends/depends.test.js
index fbe442322..f5cd7f0d2 100644
--- a/src/pat/depends/depends.test.js
+++ b/src/pat/depends/depends.test.js
@@ -1,5 +1,6 @@
-import pattern from "./depends";
 import $ from "jquery";
+import pattern from "./depends";
+import utils from "../../core/utils";
 
 describe("pat-depends", function () {
     describe("init", function () {
@@ -11,7 +12,7 @@ describe("pat-depends", function () {
             $("#lab").remove();
         });
 
-        it("Hide if condition is not met initially", function () {
+        it("Hide if condition is not met initially", async function () {
             $("#lab").html(
                 [
                     '<input type="checkbox" id="control" value="yes"/>',
@@ -20,10 +21,12 @@ describe("pat-depends", function () {
             );
             var $slave = $("#slave");
             pattern.init($slave, { condition: "control" });
+            await utils.timeout(1); // wait a tick for async to settle.
+
             expect($slave.css("display")).toBe("none");
         });
 
-        it("Show if condition is not met initially", function () {
+        it("Show if condition is not met initially", async function () {
             $("#lab").html(
                 [
                     '<input type="checkbox" id="control" value="yes" checked="checked"/>',
@@ -32,6 +35,7 @@ describe("pat-depends", function () {
             );
             var $slave = $("#slave");
             pattern.init($slave, { condition: "control" });
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($slave.css("display")).not.toBe("none");
         });
     });
@@ -45,7 +49,7 @@ describe("pat-depends", function () {
             $("#lab").remove();
         });
 
-        it("Input element", function () {
+        it("Input element", async function () {
             $("#lab").html(
                 [
                     '<input type="checkbox" id="control" value="yes" checked="checked"/>',
@@ -55,22 +59,22 @@ describe("pat-depends", function () {
             var pat = pattern.init($(".pat-depends"), {
                 condition: "control",
             });
+            await utils.timeout(1); // wait a tick for async to settle.
             var $slave = $("#slave");
             pat.disable();
             expect($slave[0].disabled).toBeTruthy();
             expect($slave.hasClass("disabled")).toBe(true);
         });
 
-        it("Anchor", function () {
+        it("Anchor", async function () {
             $("#lab").html(
                 [
                     '<input type="checkbox" id="control" value="yes" checked="checked"/>',
                     '<a class="pat-depends" href="#target">Click me</a>',
                 ].join("\n")
             );
-            var pat = pattern.init($(".pat-depends"), {
-                condition: "control",
-            });
+            var pat = pattern.init($(".pat-depends"), { condition: "control" });
+            await utils.timeout(1); // wait a tick for async to settle.
             var $slave = $("#lab a");
             pat.disable();
             var events = $._data($slave[0]).events;
@@ -89,7 +93,7 @@ describe("pat-depends", function () {
             $("#lab").remove();
         });
 
-        it("Input element", function () {
+        it("Input element", async function () {
             $("#lab").html(
                 [
                     '<input type="checkbox" id="control" value="yes" checked="checked"/>',
@@ -99,13 +103,14 @@ describe("pat-depends", function () {
             var pat = pattern.init($(".pat-depends"), {
                 condition: "control",
             });
+            await utils.timeout(1); // wait a tick for async to settle.
             var $slave = $("#lab button");
             pat.enable();
             expect($slave[0].disabled).toBeFalsy();
             expect($slave.hasClass("disabled")).toBe(false);
         });
 
-        it("Anchor", function () {
+        it("Anchor", async function () {
             $("#lab").html(
                 [
                     '<input type="checkbox" id="control" value="yes" checked="checked"/>',
@@ -115,6 +120,7 @@ describe("pat-depends", function () {
             var pat = pattern.init($(".pat-depends"), {
                 condition: "control",
             });
+            await utils.timeout(1); // wait a tick for async to settle.
             var $slave = $("#lab a");
             $slave.on("click.patternDepends", false);
             pat.enable();
diff --git a/src/pat/depends/index.html b/src/pat/depends/index.html
index 21250da09..f7c3cde51 100644
--- a/src/pat/depends/index.html
+++ b/src/pat/depends/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Depends demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/display-time/display-time.js b/src/pat/display-time/display-time.js
index f15f07c65..b59471c7b 100644
--- a/src/pat/display-time/display-time.js
+++ b/src/pat/display-time/display-time.js
@@ -1,31 +1,17 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import Base from "../../core/base";
 import Parser from "../../core/parser";
 import logging from "../../core/logging";
-import moment from "moment";
 
-var log = logging.getLogger("pat-display-time");
-log.debug("pattern loaded");
-
-var lang = document.getElementsByTagName("html")[0].getAttribute("lang");
-if (lang && lang != "en" && lang != null) {
-    // we don't support any country-specific language variants, always use first 2 letters
-    lang = lang.substr(0, 2).toLowerCase();
-    import(
-        /* webpackChunkName: "moment_locale_" */ "moment/locale/" + lang + ".js"
-    ).then(() => {
-        moment.locale(lang);
-    });
-} else {
-    moment.locale("en");
-}
-
-var parser = new Parser("display-time");
+// Lazy loading modules.
+let Moment;
 
+const log = logging.getLogger("pat-display-time");
+const parser = new Parser("display-time");
 // input datetime options
 parser.add_argument("format", "");
-parser.add_argument("locale", "en");
+parser.add_argument("locale", "");
 parser.add_argument("strict", false);
-
 // output options
 parser.add_argument("from-now", false);
 parser.add_argument("no-suffix", false);
@@ -35,48 +21,32 @@ export default Base.extend({
     name: "display-time",
     trigger: ".pat-display-time",
 
-    init: function initUndefined() {
-        this.options = parser.parse(this.$el);
-        log.debug("pattern initialized");
-        this.processDate();
-    },
+    async init() {
+        Moment = await import("moment");
+        Moment = Moment.default;
 
-    processDate: function patDisplayTimeProcessDate() {
-        function importLocale(lang) {
-            // en language is not in chunks, resolve it
-            if (lang === "en" || lang === null) {
-                return Promise.resolve();
-            }
+        this.options = parser.parse(this.$el);
 
-            // try to find language in chunks
-            return import(
-                /* webpackChunkName: "moment_locale_" */ "moment/locale/" +
-                    lang +
-                    ".js"
-            ).catch(() => {
-                // lang does not exists
-                // if language was not found, use default en
-                return null;
-            });
+        let lang =
+            this.options.locale || document.querySelector("html").lang || "en";
+        // we don't support any country-specific language variants, always use first 2 letters
+        lang = lang.substr(0, 2).toLowerCase();
+        try {
+            await import(`moment/locale/${lang}.js`);
+            Moment.locale(lang);
+        } catch {
+            Moment.locale("en");
         }
-
-        importLocale(lang).then(() => {
-            // info about used language for moment
-            console.log("Used language: " + (lang || "en"));
-
-            var date_str = this.$el.attr("datetime");
-
-            var date = moment(
-                date_str,
-                this.options.format,
-                this.options.strict
-            ).locale(this.options.locale);
-            if (this.options.fromNow === true) {
-                date = date.fromNow(this.options.noSuffix);
-            } else if (this.options.outputFormat.length) {
-                date = date.format(this.options.outputFormat);
-            }
-            this.$el.text(date);
-        });
+        log.info("Moment.js language used: " + lang);
+
+        const date_str = this.$el.attr("datetime");
+        const date = Moment(date_str, this.options.format, this.options.strict);
+        let out;
+        if (this.options.fromNow === true) {
+            out = date.fromNow(this.options.noSuffix);
+        } else if (this.options.outputFormat.length) {
+            out = date.format(this.options.outputFormat);
+        }
+        this.$el.text(out);
     },
 });
diff --git a/src/pat/display-time/index.html b/src/pat/display-time/index.html
index 0c7e31cfc..21f0fb90c 100644
--- a/src/pat/display-time/index.html
+++ b/src/pat/display-time/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <title>pat-display-time demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/equaliser/equaliser.js b/src/pat/equaliser/equaliser.js
index d804f3eb3..4a10b991a 100644
--- a/src/pat/equaliser/equaliser.js
+++ b/src/pat/equaliser/equaliser.js
@@ -3,11 +3,14 @@
  *
  * Copyright 2013 Simplon B.V. - Wichert Akkerman
  */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import registry from "../../core/registry";
 import Parser from "../../core/parser";
 import utils from "../../core/utils";
-import imagesLoaded from "imagesloaded";
+
+// Lazy loading modules.
+let ImagesLoaded;
 
 var parser = new Parser("equaliser");
 parser.addArgument("transition", "none", ["none", "grow"]);
@@ -18,7 +21,10 @@ var equaliser = {
     name: "equaliser",
     trigger: ".pat-equaliser, .pat-equalizer",
 
-    init: function ($el, opts) {
+    async init($el, opts) {
+        ImagesLoaded = await import("imagesloaded");
+        ImagesLoaded = ImagesLoaded.default;
+
         return $el.each(function () {
             var $container = $(this),
                 options = parser.parse($container, opts);
@@ -34,7 +40,7 @@ var equaliser = {
                 this,
                 utils.debounce(equaliser._onEvent, 100)
             );
-            imagesLoaded(
+            ImagesLoaded(
                 this,
                 $.proxy(function () {
                     equaliser._update(this);
diff --git a/src/pat/equaliser/equaliser.test.js b/src/pat/equaliser/equaliser.test.js
index b97f7a17b..1db86a69b 100644
--- a/src/pat/equaliser/equaliser.test.js
+++ b/src/pat/equaliser/equaliser.test.js
@@ -1,5 +1,5 @@
-import pattern from "./equaliser";
 import $ from "jquery";
+import pattern from "./equaliser";
 
 describe("pat-equaliser", function () {
     beforeEach(function () {
diff --git a/src/pat/equaliser/index.html b/src/pat/equaliser/index.html
index 61644961e..4c85700f2 100644
--- a/src/pat/equaliser/index.html
+++ b/src/pat/equaliser/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Patterns — Equaliser</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/expandable-tree/index.html b/src/pat/expandable-tree/index.html
index fa907fe50..d6c5f6d08 100644
--- a/src/pat/expandable-tree/index.html
+++ b/src/pat/expandable-tree/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/focus/index.html b/src/pat/focus/index.html
index e04e4ea76..0f157ef20 100644
--- a/src/pat/focus/index.html
+++ b/src/pat/focus/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>focus pattern demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/forward/index.html b/src/pat/forward/index.html
index 93ba96162..9485226d9 100644
--- a/src/pat/forward/index.html
+++ b/src/pat/forward/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Toggle</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/fullscreen/fullscreen-close.js b/src/pat/fullscreen/fullscreen-close.js
index 6924c0e73..30bc764fd 100644
--- a/src/pat/fullscreen/fullscreen-close.js
+++ b/src/pat/fullscreen/fullscreen-close.js
@@ -1,14 +1,20 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import Base from "../../core/base";
-import screenful from "screenfull";
+
+// Lazy loading modules.
+let Screenfull;
 
 export default Base.extend({
     name: "fullscreen-close",
     trigger: ".close-fullscreen",
-    init: function () {
+    async init() {
+        Screenfull = await import("screenfull");
+        Screenfull = Screenfull.default;
+
         this.$el[0].addEventListener("click", function () {
             // no prevent-default nor stop propagation to let
             // the button also do other stuff.
-            screenful.exit();
+            Screenfull.exit();
         });
     },
 });
diff --git a/src/pat/fullscreen/fullscreen.js b/src/pat/fullscreen/fullscreen.js
index c257bfb1b..70e17dc9f 100644
--- a/src/pat/fullscreen/fullscreen.js
+++ b/src/pat/fullscreen/fullscreen.js
@@ -1,7 +1,10 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import Base from "../../core/base";
 import Parser from "../../core/parser";
 import logging from "../../core/logging";
-import screenful from "screenfull";
+
+// Lazy loading modules.
+let Screenfull;
 
 const log = logging.getLogger("fullscreen");
 const parser = new Parser("fullscreen");
@@ -19,7 +22,10 @@ export default Base.extend({
     name: "fullscreen",
     trigger: ".pat-fullscreen",
 
-    init($el, opts) {
+    async init($el, opts) {
+        Screenfull = await import("screenfull");
+        Screenfull = Screenfull.default;
+
         this.options = parser.parse(this.$el, opts);
         //const el = this.$el[0];
         //el.addEventListener('click', function (e) {  // TODO: doesn't work in karma for href links
@@ -39,7 +45,7 @@ export default Base.extend({
         const fs_el = document.querySelector(fs_el_sel);
         if (fs_el) {
             // setting page to fullscreen
-            screenful.request(fs_el);
+            Screenfull.request(fs_el);
             if (this.options.closeButton === "show") {
                 this.setup_exit_button(fs_el);
             }
@@ -58,14 +64,14 @@ export default Base.extend({
             exit_el.appendChild(document.createTextNode("Exit fullscreen"));
             exit_el.addEventListener("click", (e) => {
                 e.preventDefault();
-                screenful.exit();
+                Screenfull.exit();
             });
         }
         fs_el.appendChild(exit_el);
-        screenful.on("change", () => {
+        Screenfull.on("change", () => {
             // Removing exit button.
             // The button is also removed when pressing the <ESC> button.
-            if (!screenful.isFullscreen) {
+            if (!Screenfull.isFullscreen) {
                 fs_el.removeChild(exit_el);
             }
         });
diff --git a/src/pat/fullscreen/fullscreen.test.js b/src/pat/fullscreen/fullscreen.test.js
index 10943e54a..e2d8c40af 100644
--- a/src/pat/fullscreen/fullscreen.test.js
+++ b/src/pat/fullscreen/fullscreen.test.js
@@ -1,8 +1,8 @@
+import $ from "jquery";
 import Pattern from "./fullscreen";
 import Pattern2 from "./fullscreen-close";
-import screenful from "screenfull";
-
-import $ from "jquery";
+import utils from "../../core/utils";
+import screenfull from "screenfull";
 
 describe("Open in fullscreen", function () {
     beforeEach(function () {
@@ -10,8 +10,8 @@ describe("Open in fullscreen", function () {
         el.setAttribute("class", "fs");
         el.setAttribute("id", "fs");
         document.body.appendChild(el);
-        spyOn(screenful, "request")();
-        spyOn(screenful, "exit").and.callThrough();
+        spyOn(screenfull, "request")();
+        spyOn(screenfull, "exit").and.callThrough();
     });
     afterEach(function () {
         document.body.removeChild(document.querySelector("#fs"));
@@ -21,7 +21,7 @@ describe("Open in fullscreen", function () {
         }
     });
 
-    it("Test 1: Define fullscreen element via href-target", function (done) {
+    it("Test 1: Define fullscreen element via href-target", async function (done) {
         var fs_el = document.querySelector("#fs");
         var pat_el = document.createElement("a");
         pat_el.setAttribute("class", "pat-fullscreen");
@@ -30,13 +30,14 @@ describe("Open in fullscreen", function () {
         fs_el.appendChild(pat_el);
 
         Pattern.init($(".pat-fullscreen"));
+        await utils.timeout(1); // wait a tick for async to settle.
         $(".pat-fullscreen").click();
-        expect(screenful.request).toHaveBeenCalled();
+        expect(screenfull.request).toHaveBeenCalled();
 
         done();
     });
 
-    it("Test 2: data-attr configuration: selector and close-button", function (done) {
+    it("Test 2: data-attr configuration: selector and close-button", async function (done) {
         var fs_el = document.querySelector("#fs");
         var pat_el = document.createElement("button");
         pat_el.setAttribute("class", "pat-fullscreen");
@@ -48,16 +49,17 @@ describe("Open in fullscreen", function () {
         fs_el.appendChild(pat_el);
 
         Pattern.init($(".pat-fullscreen"));
+        await utils.timeout(1); // wait a tick for async to settle.
         $(".pat-fullscreen").click();
-        expect(screenful.request).toHaveBeenCalled();
+        expect(screenfull.request).toHaveBeenCalled();
 
         $(".pat-fullscreen-close-fullscreen").click();
-        expect(screenful.exit).toHaveBeenCalled();
+        expect(screenfull.exit).toHaveBeenCalled();
 
         done();
     });
 
-    it("Test 3: Existing .close-fullscreen elements.", function (done) {
+    it("Test 3: Existing .close-fullscreen elements.", async function (done) {
         var fs_el = document.querySelector("#fs");
         var pat_el = document.createElement("button");
         pat_el.setAttribute("class", "pat-fullscreen");
@@ -70,17 +72,19 @@ describe("Open in fullscreen", function () {
         fs_el.appendChild(pat_close);
 
         Pattern.init($(".pat-fullscreen"));
+        await utils.timeout(1); // wait a tick for async to settle.
         $(".pat-fullscreen").click();
-        expect(screenful.request).toHaveBeenCalled();
+        expect(screenfull.request).toHaveBeenCalled();
 
         Pattern2.init($(".close-fullscreen"));
+        await utils.timeout(1); // wait a tick for async to settle.
         $(".close-fullscreen").click();
-        expect(screenful.exit).toHaveBeenCalled();
+        expect(screenfull.exit).toHaveBeenCalled();
 
         done();
     });
 
-    it("Test 4: No fullscreen element definition opens fullscreen on body.", function (done) {
+    it("Test 4: No fullscreen element definition opens fullscreen on body.", async function (done) {
         var fs_el = document.querySelector("#fs");
         var pat_el = document.createElement("button");
         pat_el.setAttribute("class", "pat-fullscreen");
@@ -88,8 +92,9 @@ describe("Open in fullscreen", function () {
         fs_el.appendChild(pat_el);
 
         Pattern.init($(".pat-fullscreen"));
+        await utils.timeout(1); // wait a tick for async to settle.
         $(".pat-fullscreen").click();
-        expect(screenful.request).toHaveBeenCalled();
+        expect(screenfull.request).toHaveBeenCalled();
 
         done();
     });
diff --git a/src/pat/fullscreen/index.html b/src/pat/fullscreen/index.html
index 495afb277..c1616b6ee 100644
--- a/src/pat/fullscreen/index.html
+++ b/src/pat/fullscreen/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Scroll demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/gallery/gallery.js b/src/pat/gallery/gallery.js
index 6c1a65eae..1d1695671 100644
--- a/src/pat/gallery/gallery.js
+++ b/src/pat/gallery/gallery.js
@@ -3,13 +3,16 @@
  *
  * Copyright 2013 Simplon B.V. - Wichert Akkerman
  */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import _ from "underscore";
 import Base from "../../core/base";
 import Parser from "../../core/parser";
-import PhotoSwipe from "photoswipe";
-import PhotoSwipeUI from "photoswipe/dist/photoswipe-ui-default";
-import template from "./template.html";
+
+// Lazy loading modules.
+let Template;
+let PhotoSwipe;
+let PhotoSwipeUI;
 
 var parser = new Parser("gallery");
 parser.addArgument("item-selector", "a"); // selector for anchor element, which is added to the gallery.
@@ -23,10 +26,16 @@ export default Base.extend({
     trigger: ".pat-gallery",
     origBodyOverflow: "auto",
 
-    init: function patGalleryInit($el, opts) {
+    async init($el, opts) {
+        PhotoSwipe = await import("photoswipe");
+        PhotoSwipe = PhotoSwipe.default;
+        PhotoSwipeUI = await import("photoswipe/dist/photoswipe-ui-default");
+        PhotoSwipeUI = PhotoSwipeUI.default;
+
         this.options = parser.parse(this.$el, opts);
         if ($("#photoswipe-template").length === 0) {
-            $("body").append(_.template(template)());
+            Template = await import("./template.html");
+            $("body").append(_.template(Template)());
         }
 
         // Search for itemSelector including the current node
@@ -53,6 +62,7 @@ export default Base.extend({
             pinchToClose: false,
             closeOnScroll: false,
         };
+
         image_wrapper.click(function (ev) {
             if (
                 this.tagName.toLowerCase() === "img" &&
@@ -62,6 +72,7 @@ export default Base.extend({
                 return;
             }
             ev.preventDefault();
+
             // Get the index of the clicked gallery item in the list of images.
             options.index =
                 _.indexOf(_.pluck(images, "src"), this.href || this.src) || 0;
diff --git a/src/pat/gallery/index.html b/src/pat/gallery/index.html
index 9d01524a0..faa6314d2 100644
--- a/src/pat/gallery/index.html
+++ b/src/pat/gallery/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Gallery</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/grid/index.html b/src/pat/grid/index.html
index acc976f40..eddf85e79 100644
--- a/src/pat/grid/index.html
+++ b/src/pat/grid/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Patterns — Grid</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/image-crop/image-crop.js b/src/pat/image-crop/image-crop.js
index 079a24cf7..3afa871f1 100644
--- a/src/pat/image-crop/image-crop.js
+++ b/src/pat/image-crop/image-crop.js
@@ -1,8 +1,8 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
 import registry from "../../core/registry";
-import "jquery-jcrop";
 
 var log = logging.getLogger("pat.image-crop"),
     parser = new Parser("image-crop");
@@ -23,7 +23,9 @@ var _ = {
     bounds: [0, 0],
     inputNames: ["x1", "y1", "x2", "y2", "w", "h"],
 
-    init: function ($el, options) {
+    async init($el, options) {
+        await import("jquery-jcrop");
+
         // initialize the elements
         return $el.each(function () {
             var $this = $(this),
diff --git a/src/pat/image-crop/index.html b/src/pat/image-crop/index.html
index be843eb5b..00a9cafb2 100644
--- a/src/pat/image-crop/index.html
+++ b/src/pat/image-crop/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/inject-history/index.html b/src/pat/inject-history/index.html
index cf95284ee..700bee55e 100644
--- a/src/pat/inject-history/index.html
+++ b/src/pat/inject-history/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/inject-history/page1.html b/src/pat/inject-history/page1.html
index b1ebaffe5..631159532 100644
--- a/src/pat/inject-history/page1.html
+++ b/src/pat/inject-history/page1.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/inject-history/page2.html b/src/pat/inject-history/page2.html
index 324dd5016..8ea71739d 100644
--- a/src/pat/inject-history/page2.html
+++ b/src/pat/inject-history/page2.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/inject-history/page3.html b/src/pat/inject-history/page3.html
index 7f6796259..c49b2d995 100644
--- a/src/pat/inject-history/page3.html
+++ b/src/pat/inject-history/page3.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Injection history demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/inject/index.html b/src/pat/inject/index.html
index 17650ced3..9effad0e2 100644
--- a/src/pat/inject/index.html
+++ b/src/pat/inject/index.html
@@ -10,11 +10,6 @@
         <meta name="patterns-push-user-id" content="allan_neece" />
         <title>Injection pattern</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
index a12f6eac0..e2ba97a99 100644
--- a/src/pat/inject/inject.js
+++ b/src/pat/inject/inject.js
@@ -1,3 +1,4 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import _ from "underscore";
 import ajax from "../ajax/ajax";
@@ -654,7 +655,7 @@ const inject = {
         $el.trigger("pat-inject-success");
     },
 
-    _onInjectSuccess: function ($el, cfgs, ev) {
+    async _onInjectSuccess($el, cfgs, ev) {
         var sources$,
             data = ev && ev.jqxhr && ev.jqxhr.responseText;
         if (!data) {
@@ -669,11 +670,12 @@ const inject = {
             $el.trigger("pat-inject-hook-" + hook);
         });
         inject.stopBubblingFromRemovedElement($el, cfgs, ev);
-        sources$ = inject.callTypeHandler(cfgs[0].dataType, "sources", $el, [
-            cfgs,
-            data,
-            ev,
-        ]);
+        sources$ = await inject.callTypeHandler(
+            cfgs[0].dataType,
+            "sources",
+            $el,
+            [cfgs, data, ev]
+        );
         /* pick the title source for dedicated handling later
           Title - if present - is always appended at the end. */
         var title;
@@ -1157,15 +1159,10 @@ const inject = {
         inject.handlers[type] = handler;
     },
 
-    callTypeHandler: function inject_callTypeHandler(
-        type,
-        fn,
-        context,
-        params
-    ) {
+    async callTypeHandler(type, fn, context, params) {
         type = type || "html";
         if (inject.handlers[type] && $.isFunction(inject.handlers[type][fn])) {
-            return inject.handlers[type][fn].apply(context, params);
+            return await inject.handlers[type][fn].apply(context, params);
         } else {
             return null;
         }
diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
index e89280567..abe2e0f80 100644
--- a/src/pat/inject/inject.test.js
+++ b/src/pat/inject/inject.test.js
@@ -16,14 +16,11 @@ describe("pat-inject", function () {
 
     afterEach(function () {
         $("#lab").remove();
+        jest.restoreAllMocks();
     });
 
     describe("The next-href argument", function () {
-        afterEach(function () {
-            $("#lab").empty();
-        });
-
-        it("allows you to specify the href to be applied to the clicked element after injection", function () {
+        it("allows you to specify the href to be applied to the clicked element after injection", async function () {
             var $a = $(
                 '<a class="pat-inject" data-pat-inject="next-href: http://patternslib.com" href="/src/pat/inject/inject-sources.html#pos-1">link</a>'
             );
@@ -38,17 +35,15 @@ describe("pat-inject", function () {
             var cfgs = pattern.extractConfig($a, {});
             pattern.verifyConfig(cfgs, $a);
             pattern._onInjectSuccess($a, cfgs, dummy_event);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             expect(cfgs[0].nextHref).toBe("http://patternslib.com");
             expect($a.attr("href")).toBe("http://patternslib.com");
         });
     });
 
     describe("The loading-class argument", function () {
-        afterEach(function () {
-            $("#lab").empty();
-        });
-
-        it("has a default value of 'injecting' and gets added to the target while content is still loading'", function () {
+        it("has a default value of 'injecting' and gets added to the target while content is still loading'", async function () {
             spyOn($, "ajax").and.returnValue(deferred);
             var $a = $(
                 '<a class="pat-inject" href="test.html#someid">link</a>'
@@ -72,11 +67,12 @@ describe("pat-inject", function () {
                     '<div id="someid">repl</div>' +
                     "</body></html>"
             );
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($div.hasClass("injecting")).toBeFalsy();
             expect(callback).toHaveBeenCalled();
         });
 
-        it("can be set to another string value which then gets added to the target while content is still loading'", function () {
+        it("can be set to another string value which then gets added to the target while content is still loading'", async function () {
             spyOn($, "ajax").and.returnValue(deferred);
             var $a = $(
                 '<a class="pat-inject" data-pat-inject="loading-class: other-class;" href="test.html#someid">link</a>'
@@ -97,6 +93,7 @@ describe("pat-inject", function () {
                     '<div id="someid">repl</div>' +
                     "</body></html>"
             );
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($div.hasClass("other-class")).toBeFalsy();
         });
 
@@ -116,10 +113,6 @@ describe("pat-inject", function () {
     });
 
     describe("The confirm argument", function () {
-        afterEach(function () {
-            $("#lab").empty();
-        });
-
         it("is by default set to 'class', which means it asks for confirmation based on a class on the target", function () {
             var $a = $(
                 '<a class="pat-inject" href="test.html#someid">link</a>'
@@ -212,10 +205,6 @@ describe("pat-inject", function () {
         });
 
         describe("The confirm-message argument", function () {
-            afterEach(function () {
-                $("#lab").empty();
-            });
-
             it("can be used to provide a custom confirmation prompt message", function () {
                 var $a = $(
                     '<a class="pat-inject" href="test.html#someid" data-pat-inject="confirm: always; confirm-message: Hello world">link</a>'
@@ -415,7 +404,7 @@ describe("pat-inject", function () {
         beforeEach(function () {});
 
         describe("The patterns-injected event", function () {
-            it("gets triggered after injection has finished'", function () {
+            it("gets triggered after injection has finished'", async function () {
                 spyOn($, "ajax").and.returnValue(deferred);
                 var $a = $(
                     '<a class="pat-inject" href="test.html#someid">link</a>'
@@ -431,6 +420,7 @@ describe("pat-inject", function () {
                         '<div id="someid">repl</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
                 expect(callback).toHaveBeenCalled();
             });
         });
@@ -476,22 +466,23 @@ describe("pat-inject", function () {
                 expect($.ajax.calls.mostRecent().args[0].url).toBe("test.html");
             });
 
-            it("injects into existing div", function () {
+            it("injects into existing div", async function () {
                 pattern.init($a);
                 $a.trigger("click");
                 answer(
                     '<html><body><div id="someid">replacement</div></body></html>'
                 );
-
+                await utils.timeout(1); // wait a tick for async to settle.
                 expect($div.html()).toBe("replacement");
             });
 
-            it("injects multiple times", function () {
+            it("injects multiple times", async function () {
                 pattern.init($a);
                 $a.trigger("click");
                 answer(
                     '<html><body><div id="someid">replacement</div></body></html>'
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
                 expect($div.html()).toBe("replacement");
 
                 // Deferred objects are supposed to be resolved only once.
@@ -509,10 +500,11 @@ describe("pat-inject", function () {
                 answer(
                     '<html><body><div id="someid">new replacement</div></body></html>'
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
                 expect($div.html()).toBe("new replacement");
             });
 
-            it("takes multiple source-target pairs", function () {
+            it("takes multiple source-target pairs", async function () {
                 $a.attr(
                     "data-pat-inject",
                     "#someid1 #otherid1 && #someid2 #otherid2"
@@ -529,12 +521,13 @@ describe("pat-inject", function () {
                         '<div id="someid2">repl2</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
 
                 expect($target1.html()).toBe("repl1");
                 expect($target2.html()).toBe("repl2");
             });
 
-            it("acts on other selectors as well", function () {
+            it("acts on other selectors as well", async function () {
                 $a.attr("data-pat-inject", "target: #someid > .someclass");
                 var $target1 = $('<div class="someclass" />'),
                     $target2 = $('<div class="someclass" />');
@@ -547,12 +540,13 @@ describe("pat-inject", function () {
                         '<div id="someid">repl</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
 
                 expect($target1.html()).toBe("repl");
                 expect($target2.html()).toBe("repl");
             });
 
-            it("copies into target if source has ::element", function () {
+            it("copies into target if source has ::element", async function () {
                 $a.attr("data-pat-inject", "#otherid::element #someid");
 
                 pattern.init($a);
@@ -562,12 +556,13 @@ describe("pat-inject", function () {
                         '<div id="otherid" class="someclass">repl</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
 
                 expect($div.children().attr("id")).toBe("otherid");
                 expect($div.children().attr("class")).toBe("someclass");
             });
 
-            it("replaces target if both selectors have ::element", function () {
+            it("replaces target if both selectors have ::element", async function () {
                 $a.attr(
                     "data-pat-inject",
                     "#someid::element #otherid::element"
@@ -581,12 +576,13 @@ describe("pat-inject", function () {
                         '<div id="someid" class="someclass">repl</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
 
                 expect($div.children().attr("id")).toBe("someid");
                 expect($div.children().attr("class")).toBe("someclass");
             });
 
-            it("allows ::before and ::after in target selector", function () {
+            it("allows ::before and ::after in target selector", async function () {
                 $a.attr(
                     "data-pat-inject",
                     "target: #target1::after && target: #target2::before"
@@ -602,12 +598,13 @@ describe("pat-inject", function () {
                         '<div id="someid">repl</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
 
                 expect($target1.html()).toBe("contentrepl");
                 expect($target2.html()).toBe("replcontent");
             });
 
-            it("allows mixing ::element and ::after in target", function () {
+            it("allows mixing ::element and ::after in target", async function () {
                 $a.attr("data-pat-inject", "target: #otherid::element::after");
                 $div.append($('<div id="otherid" />'));
 
@@ -618,6 +615,7 @@ describe("pat-inject", function () {
                         '<div id="someid">repl</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
 
                 expect($div.contents().last().text()).toBe("repl");
             });
@@ -635,7 +633,7 @@ describe("pat-inject", function () {
                 $("#lab").append($form).append($div);
             });
 
-            it("trigger injection on submit", function () {
+            it("trigger injection on submit", async function () {
                 pattern.init($form);
                 $form.trigger("submit");
                 answer(
@@ -643,6 +641,7 @@ describe("pat-inject", function () {
                         '<div id="someid">repl</div>' +
                         "</body></html>"
                 );
+                await utils.timeout(1); // wait a tick for async to settle.
 
                 expect($div.html()).toBe("repl");
             });
@@ -731,7 +730,7 @@ describe("pat-inject", function () {
                     expect(ajaxargs.data).toBe("submit=special");
                 });
 
-                it("use fragment in formaction value as source + target selector", function () {
+                it("use fragment in formaction value as source + target selector", async function () {
                     var $submit1 = $(
                             '<input type="submit" name="submit" value="default" />'
                         ),
@@ -751,6 +750,7 @@ describe("pat-inject", function () {
                             '<div id="otherid">other</div>' +
                             "</body></html>"
                     );
+                    await utils.timeout(1); // wait a tick for async to settle.
 
                     var ajaxargs = $.ajax.calls.mostRecent().args[0];
                     expect($.ajax).toHaveBeenCalled();
@@ -759,7 +759,7 @@ describe("pat-inject", function () {
                     expect($target.html()).toBe("other");
                 });
 
-                it("use fragment in formaction value as source selector, respect target", function () {
+                it("use fragment in formaction value as source selector, respect target", async function () {
                     var $submit1 = $(
                             '<input type="submit" name="submit" value="default" />'
                         ),
@@ -780,6 +780,7 @@ describe("pat-inject", function () {
                             '<div id="otherid">other</div>' +
                             "</body></html>"
                     );
+                    await utils.timeout(1); // wait a tick for async to settle.
 
                     var ajaxargs = $.ajax.calls.mostRecent().args[0];
                     expect($.ajax).toHaveBeenCalled();
@@ -788,7 +789,7 @@ describe("pat-inject", function () {
                     expect($target.html()).toBe("other");
                 });
 
-                it("formaction works with multiple targets", function () {
+                it("formaction works with multiple targets", async function () {
                     var $submit1 = $(
                             '<input type="submit" name="submit" value="default" />'
                         ),
@@ -813,6 +814,7 @@ describe("pat-inject", function () {
                             '<div id="otherid">other</div>' +
                             "</body></html>"
                     );
+                    await utils.timeout(1); // wait a tick for async to settle.
 
                     var ajaxargs = $.ajax.calls.mostRecent().args[0];
                     expect($.ajax).toHaveBeenCalled();
@@ -822,7 +824,7 @@ describe("pat-inject", function () {
                     expect($target2.html()).toBe("other");
                 });
 
-                it("formaction works with multiple sources", function () {
+                it("formaction works with multiple sources", async function () {
                     var $submit1 = $(
                             '<input type="submit" name="submit" value="default" />'
                         ),
@@ -848,6 +850,7 @@ describe("pat-inject", function () {
                             '<div id="otherid">other</div>' +
                             "</body></html>"
                     );
+                    await utils.timeout(1); // wait a tick for async to settle.
 
                     var ajaxargs = $.ajax.calls.mostRecent().args[0];
                     expect($.ajax).toHaveBeenCalled();
@@ -857,7 +860,7 @@ describe("pat-inject", function () {
                     expect($target2.html()).toBe("other");
                 });
 
-                it("formaction works source and target on the button", function () {
+                it("formaction works source and target on the button", async function () {
                     var $submit1 = $(
                             '<input type="submit" name="submit" value="default" />'
                         ),
@@ -883,6 +886,7 @@ describe("pat-inject", function () {
                             '<div id="otherid">other</div>' +
                             "</body></html>"
                     );
+                    await utils.timeout(1); // wait a tick for async to settle.
 
                     var ajaxargs = $.ajax.calls.mostRecent().args[0];
                     expect($.ajax).toHaveBeenCalled();
diff --git a/src/pat/inject/pattern-test-response.html b/src/pat/inject/pattern-test-response.html
index f8e936509..5496c3b27 100644
--- a/src/pat/inject/pattern-test-response.html
+++ b/src/pat/inject/pattern-test-response.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Insert title here</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/inject/test-self-inject.html b/src/pat/inject/test-self-inject.html
index aa436dc8e..aa95f89d6 100644
--- a/src/pat/inject/test-self-inject.html
+++ b/src/pat/inject/test-self-inject.html
@@ -3,11 +3,6 @@
     <head>
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/markdown/index.html b/src/pat/markdown/index.html
index 80e0c2b78..978512ec1 100644
--- a/src/pat/markdown/index.html
+++ b/src/pat/markdown/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/markdown/injected-page.html b/src/pat/markdown/injected-page.html
index 7e97491ae..0a355e9f9 100644
--- a/src/pat/markdown/injected-page.html
+++ b/src/pat/markdown/injected-page.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/markdown/markdown.js b/src/pat/markdown/markdown.js
index 925eb0a3d..26f8423e2 100644
--- a/src/pat/markdown/markdown.js
+++ b/src/pat/markdown/markdown.js
@@ -1,9 +1,12 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import logging from "../../core/logging";
 import utils from "../../core/utils";
 import Base from "../../core/base";
 import inject from "../inject/inject";
-import Showdown from "showdown";
+
+// Lazy loading modules.
+let Showdown;
 
 var log = logging.getLogger("pat.markdown");
 var is_markdown_resource = /\.md$/;
@@ -12,7 +15,7 @@ var Markdown = Base.extend({
     name: "markdown",
     trigger: ".pat-markdown",
 
-    init: function () {
+    async init() {
         if (this.$el.is(this.trigger)) {
             /* This pattern can either be used standalone or as an enhancement
              * to pat-inject. The following only applies to standalone, when
@@ -21,21 +24,46 @@ var Markdown = Base.extend({
             var source = this.$el.is(":input")
                 ? this.$el.val()
                 : this.$el.text();
-            this.render(source).replaceAll(this.$el);
+            let rendered = await this.render(source);
+            rendered.replaceAll(this.$el);
         }
     },
 
-    render: function (text) {
-        var $rendering = $("<div/>"),
-            converter = new Showdown.Converter({
-                tables: true,
-                extensions: ["prettify"],
-            });
+    async render(text) {
+        Showdown = await import("showdown");
+        Showdown = Showdown.default;
+
+        // Add support for syntax highlighting via pat-syntax-highlight
+        Showdown.extensions.prettify = function () {
+            return [
+                {
+                    type: "output",
+                    filter: function (source) {
+                        return source.replace(/(<pre>)?<code>/gi, function (
+                            match,
+                            pre
+                        ) {
+                            if (pre) {
+                                return '<pre class="pat-syntax-highlight" tabIndex="0"><code data-inner="1">';
+                            } else {
+                                return '<code class="pat-syntax-highlight">';
+                            }
+                        });
+                    },
+                },
+            ];
+        };
+
+        const $rendering = $("<div/>");
+        const converter = new Showdown.Converter({
+            tables: true,
+            extensions: ["prettify"],
+        });
         $rendering.html(converter.makeHtml(text));
         return $rendering;
     },
 
-    renderForInjection: function (cfg, data) {
+    async renderForInjection(cfg, data) {
         var header,
             source = data;
         if (cfg.source && (header = /^#+\s*(.*)/.exec(cfg.source)) !== null) {
@@ -48,13 +76,14 @@ var Markdown = Base.extend({
             }
             source += "\n"; // Needed for some markdown syntax
         }
-        return this.render(source).attr(
+        const rendered = await this.render(source);
+        return rendered.attr(
             "data-src",
             cfg.source ? cfg.url + cfg.source : cfg.url
         );
     },
 
-    extractSection: function (text, header) {
+    extractSection(text, header) {
         var pattern, level;
         header = utils.escapeRegExp(header);
         var matcher = new RegExp(
@@ -95,27 +124,6 @@ var Markdown = Base.extend({
     },
 });
 
-// Add support for syntax highlighting via pat-syntax-highlight
-Showdown.extensions.prettify = function () {
-    return [
-        {
-            type: "output",
-            filter: function (source) {
-                return source.replace(/(<pre>)?<code>/gi, function (
-                    match,
-                    pre
-                ) {
-                    if (pre) {
-                        return '<pre class="pat-syntax-highlight" tabIndex="0"><code data-inner="1">';
-                    } else {
-                        return '<code class="pat-syntax-highlight">';
-                    }
-                });
-            },
-        },
-    ];
-};
-
 $(document).ready(function () {
     $(document.body).on(
         "patterns-inject-triggered.pat-markdown",
@@ -135,11 +143,14 @@ $(document).ready(function () {
 });
 
 inject.registerTypeHandler("markdown", {
-    sources: function (cfgs, data) {
-        return cfgs.map(function (cfg) {
-            var pat = Markdown.init(cfg.$target);
-            return pat.renderForInjection(cfg, data);
-        });
+    async sources(cfgs, data) {
+        return await Promise.all(
+            cfgs.map(async function (cfg) {
+                var pat = Markdown.init(cfg.$target);
+                const rendered = await pat.renderForInjection(cfg, data);
+                return rendered;
+            })
+        );
     },
 });
 
diff --git a/src/pat/markdown/markdown.test.js b/src/pat/markdown/markdown.test.js
index 7426d4584..5d1050f63 100644
--- a/src/pat/markdown/markdown.test.js
+++ b/src/pat/markdown/markdown.test.js
@@ -1,5 +1,6 @@
-import pattern from "./markdown";
 import $ from "jquery";
+import pattern from "./markdown";
+import utils from "../../core/utils";
 
 describe("pat-markdown", function () {
     beforeEach(function () {
@@ -11,22 +12,26 @@ describe("pat-markdown", function () {
     });
 
     describe("when initialized", function () {
-        it("replaces the DOM element with the rendered Markdown content.", function () {
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+        it("replaces the DOM element with the rendered Markdown content.", async function () {
             var $el = $('<p class="pat-markdown"></p>');
             $el.appendTo("#lab");
-            spyOn(pattern.prototype, "render").and.returnValue(
-                $("<p>Rendering</p>")
-            );
+            jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
+                return $("<p>Rendering</p>");
+            });
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             expect($("#lab").html()).toBe("<p>Rendering</p>");
         });
 
         it("does not replace the DOM element if it doesn't have the pattern trigger", function () {
             var $el = $("<p></p>");
             $el.appendTo("#lab");
-            spyOn(pattern.prototype, "render").and.returnValue(
-                $("<p>Rendering</p>")
-            );
+            jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
+                return $("<p>Rendering</p>");
+            });
             pattern.init($el);
             expect($("#lab").html()).toBe("<p></p>");
         });
@@ -34,9 +39,11 @@ describe("pat-markdown", function () {
         it("uses content for non-input elements", function () {
             var $el = $('<p class="pat-markdown"/>').text("This is markdown");
             $el.appendTo("#lab");
-            var spy_render = spyOn(pattern.prototype, "render").and.returnValue(
-                $("<p/>")
-            );
+            const spy_render = jest
+                .spyOn(pattern.prototype, "render")
+                .mockImplementation(() => {
+                    return $("<p/>");
+                });
             pattern.init($el);
             expect(spy_render).toHaveBeenCalledWith("This is markdown");
         });
@@ -46,22 +53,28 @@ describe("pat-markdown", function () {
                 "This is markdown"
             );
             $el.appendTo("#lab");
-            var spy_render = spyOn(pattern.prototype, "render").and.returnValue(
-                $("<p/>")
-            );
+            const spy_render = jest
+                .spyOn(pattern.prototype, "render")
+                .mockImplementation(() => {
+                    return $("<p/>");
+                });
             pattern.init($el);
             expect(spy_render).toHaveBeenCalledWith("This is markdown");
         });
     });
 
     describe("when rendering", function () {
-        it("wraps rendering in a div", function () {
-            var $rendering = pattern.prototype.render("*This is markdown*");
+        it("wraps rendering in a div", async function () {
+            const $rendering = await pattern.prototype.render(
+                "*This is markdown*"
+            );
             expect($rendering[0].tagName).toBe("DIV");
         });
 
-        it("converts markdown into HTML", function () {
-            var $rendering = pattern.prototype.render("*This is markdown*");
+        it("converts markdown into HTML", async function () {
+            const $rendering = await pattern.prototype.render(
+                "*This is markdown*"
+            );
             expect($rendering.html()).toBe("<p><em>This is markdown</em></p>");
         });
     });
diff --git a/src/pat/markdown/standalone-test.html b/src/pat/markdown/standalone-test.html
index 5c5a797ab..ec261b767 100644
--- a/src/pat/markdown/standalone-test.html
+++ b/src/pat/markdown/standalone-test.html
@@ -5,11 +5,6 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=1274, user-scalable=no" />
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/masonry/index.html b/src/pat/masonry/index.html
index ec9df93d5..1e61f19bd 100644
--- a/src/pat/masonry/index.html
+++ b/src/pat/masonry/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Masonry Pattern demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/masonry/masonry.js b/src/pat/masonry/masonry.js
index 630503d63..df33b9a57 100644
--- a/src/pat/masonry/masonry.js
+++ b/src/pat/masonry/masonry.js
@@ -2,14 +2,16 @@
  * Patternslib pattern for Masonry
  * Copyright 2015 Syslab.com GmBH
  */
-
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
 import Base from "../../core/base";
 import utils from "../../core/utils";
-import Masonry from "masonry-layout";
-import imagesLoaded from "imagesloaded";
+
+// Lazy loading modules.
+let ImagesLoaded;
+let Masonry;
 
 var log = logging.getLogger("pat.masonry");
 var parser = new Parser("masonry");
@@ -41,12 +43,17 @@ export default Base.extend({
     name: "masonry",
     trigger: ".pat-masonry",
 
-    init: function masonryInit($el, opts) {
+    async init($el, opts) {
+        Masonry = await import("masonry-layout");
+        Masonry = Masonry.default;
+        ImagesLoaded = await import("imagesloaded");
+        ImagesLoaded = ImagesLoaded.default;
+
         this.options = parser.parse(this.$el, opts);
         // Initialize
         this.initMasonry();
 
-        var imgLoad = imagesLoaded(this.$el);
+        const imgLoad = await ImagesLoaded(this.$el);
         imgLoad.on(
             "progress",
             function () {
@@ -89,7 +96,7 @@ export default Base.extend({
         observer.observe(document.body, config);
     },
 
-    initMasonry: function () {
+    async initMasonry() {
         var containerStyle;
         try {
             containerStyle = JSON.parse(this.options.containerStyle);
diff --git a/src/pat/menu/index.html b/src/pat/menu/index.html
index 3e8e864e0..1d5b2081f 100644
--- a/src/pat/menu/index.html
+++ b/src/pat/menu/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-colour-picker demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/minimalpattern/index.html b/src/pat/minimalpattern/index.html
index 49cbf1372..979fbb06d 100644
--- a/src/pat/minimalpattern/index.html
+++ b/src/pat/minimalpattern/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Minimalpattern Demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/modal/index.html b/src/pat/modal/index.html
index d0d19b87c..e869325d7 100644
--- a/src/pat/modal/index.html
+++ b/src/pat/modal/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/navigation/index.html b/src/pat/navigation/index.html
index 2e2295bec..fe93932ac 100644
--- a/src/pat/navigation/index.html
+++ b/src/pat/navigation/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Navigation demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/navigation/navigation.test.js b/src/pat/navigation/navigation.test.js
index d619e4271..7bbe87c94 100644
--- a/src/pat/navigation/navigation.test.js
+++ b/src/pat/navigation/navigation.test.js
@@ -1,6 +1,7 @@
 import "./navigation";
 import "../inject/inject";
 import Registry from "../../core/registry";
+import utils from "../../core/utils";
 
 describe("Navigation pattern tests", function () {
     beforeEach(function () {
@@ -82,7 +83,7 @@ describe("Navigation pattern tests", function () {
         document.body.removeChild(document.querySelector("#page_wrapper"));
     });
 
-    it("Test 1: Test roundtrip", function (done) {
+    it("Test 1: Test roundtrip", async function (done) {
         var injection_area = document.querySelector("#injection_area");
 
         var nav1 = document.querySelector(".nav1");
@@ -98,8 +99,11 @@ describe("Navigation pattern tests", function () {
         var a21 = nav2.querySelector(".a21");
 
         Registry.scan("body");
+        await utils.timeout(1); // wait a tick for async to settle.
 
         a1.click();
+        await utils.timeout(1); // wait a tick for async to settle.
+
         expect(injection_area.textContent === "test content").toBeTruthy();
         expect(w1.classList.contains("current")).toBeTruthy();
         expect(w1.classList.contains("navigation-in-path")).toBeFalsy();
@@ -113,6 +117,8 @@ describe("Navigation pattern tests", function () {
         injection_area.innerHTML = "";
 
         a11.click();
+        await utils.timeout(1); // wait a tick for async to settle.
+
         expect(injection_area.textContent === "test content").toBeTruthy();
         expect(w1.classList.contains("current")).toBeFalsy();
         expect(w1.classList.contains("navigation-in-path")).toBeTruthy();
@@ -126,6 +132,8 @@ describe("Navigation pattern tests", function () {
         injection_area.innerHTML = "";
 
         a2.click();
+        await utils.timeout(1); // wait a tick for async to settle.
+
         expect(injection_area.textContent === "test content").toBeTruthy();
         expect(w2.classList.contains("active")).toBeTruthy();
         expect(w2.classList.contains("in-path")).toBeFalsy();
@@ -139,6 +147,8 @@ describe("Navigation pattern tests", function () {
         injection_area.innerHTML = "";
 
         a21.click();
+        await utils.timeout(1); // wait a tick for async to settle.
+
         expect(injection_area.textContent === "test content").toBeTruthy();
         expect(w2.classList.contains("active")).toBeFalsy();
         expect(w2.classList.contains("in-path")).toBeTruthy();
@@ -152,7 +162,7 @@ describe("Navigation pattern tests", function () {
         done();
     });
 
-    it("Test 2: Auto load current", function (done) {
+    it("Test 2: Auto load current", async function (done) {
         var injection_area = document.querySelector("#injection_area");
 
         var nav2 = document.querySelector(".nav2");
@@ -165,6 +175,7 @@ describe("Navigation pattern tests", function () {
         a21.classList.add("active");
 
         Registry.scan("body");
+        await utils.timeout(1); // wait a tick for async to settle.
 
         expect(injection_area.textContent === "test content").toBeTruthy();
         expect(w2.classList.contains("active")).toBeFalsy();
diff --git a/src/pat/notification/index.html b/src/pat/notification/index.html
index 5b1b10275..924b6fce1 100644
--- a/src/pat/notification/index.html
+++ b/src/pat/notification/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Notification demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/notification/inject-notification.html b/src/pat/notification/inject-notification.html
index 593c4229d..26a9d69be 100644
--- a/src/pat/notification/inject-notification.html
+++ b/src/pat/notification/inject-notification.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/push/index.html b/src/pat/push/index.html
index 27844c4bf..bd1be4a61 100644
--- a/src/pat/push/index.html
+++ b/src/pat/push/index.html
@@ -10,11 +10,6 @@
         <meta name="patterns-push-user-id" content="allan_neece" />
         <title>Injection pattern</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/scroll-box/index.html b/src/pat/scroll-box/index.html
index 97b54765b..66b643599 100644
--- a/src/pat/scroll-box/index.html
+++ b/src/pat/scroll-box/index.html
@@ -5,11 +5,6 @@
         <meta name="viewport" content="width=device-width" />
         <title>Demo for pat-scroll</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/scroll/debug.html b/src/pat/scroll/debug.html
index 7ef52b6fe..b411acc6c 100644
--- a/src/pat/scroll/debug.html
+++ b/src/pat/scroll/debug.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Scroll demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/scroll/index.html b/src/pat/scroll/index.html
index 832c5116c..7d7bdfb4c 100644
--- a/src/pat/scroll/index.html
+++ b/src/pat/scroll/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Scroll demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/scroll/scroll.js b/src/pat/scroll/scroll.js
index 794700f32..761d22707 100644
--- a/src/pat/scroll/scroll.js
+++ b/src/pat/scroll/scroll.js
@@ -1,9 +1,12 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import Base from "../../core/base";
 import utils from "../../core/utils";
 import Parser from "../../core/parser";
 import _ from "underscore";
-import imagesLoaded from "imagesloaded";
+
+// Lazy loading modules.
+let ImagesLoaded;
 
 const parser = new Parser("scroll");
 
@@ -17,14 +20,18 @@ export default Base.extend({
     trigger: ".pat-scroll",
     jquery_plugin: true,
 
-    init: function ($el, opts) {
+    async init($el, opts) {
         this.options = parser.parse(this.$el, opts);
         if (this.options.trigger == "auto") {
+            ImagesLoaded = await import("imagesloaded");
+            ImagesLoaded = ImagesLoaded.default;
             // Only calculate the offset when all images are loaded
-            var that = this;
-            imagesLoaded($("body"), function () {
-                that.smoothScroll();
-            });
+            ImagesLoaded(
+                $("body"),
+                function () {
+                    this.smoothScroll();
+                }.bind(this)
+            );
         } else if (this.options.trigger == "click") {
             this.$el.click(this.onClick.bind(this));
         }
diff --git a/src/pat/scroll/scroll.test.js b/src/pat/scroll/scroll.test.js
index d7b950a2f..f07315096 100644
--- a/src/pat/scroll/scroll.test.js
+++ b/src/pat/scroll/scroll.test.js
@@ -1,80 +1,70 @@
-import pattern from "./scroll";
 import $ from "jquery";
+import pattern from "./scroll";
+import utils from "../../core/utils";
 
 describe("pat-scroll", function () {
-    describe("If the trigger is set to 'auto", function () {
-        beforeEach(function () {
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-        afterEach(function () {
-            $("#lab").remove();
-        });
+    beforeEach(function () {
+        $("<div/>", { id: "lab" }).appendTo(document.body);
+    });
+    afterEach(function () {
+        $("#lab").remove();
+        jest.restoreAllMocks();
+    });
 
-        it("will automatically scroll to an anchor if the trigger is set to 'auto'", function (done) {
+    describe("If the trigger is set to 'auto", function () {
+        it("will automatically scroll to an anchor if the trigger is set to 'auto'", async function (done) {
             $("#lab").html(
                 [
                     '<a href="#p1" class="pat-scroll" data-pat-scroll="trigger: auto">p1</a>',
                     '<p id="p1"></p>',
                 ].join("\n")
             );
-            // var spy_animate = spyOn($.fn, 'animate');
+            const spy_animate = jest.spyOn($.fn, "animate");
             pattern.init($(".pat-scroll"));
-            setTimeout(function () {
-                // heisenbug: expect(spy_animate).toHaveBeenCalled();
-                done();
-            }, 2000);
+            await utils.timeout(10); // wait some ticks for async to settle.
+            expect(spy_animate).toHaveBeenCalled();
+            done();
         });
     });
 
     describe("If the trigger is set to 'click'", function () {
-        beforeEach(function () {
-            $("<div/>", { id: "lab" }).appendTo(document.body);
-        });
-        afterEach(function () {
-            $("#lab").remove();
-        });
-
-        it("will scroll to an anchor on click", function (done) {
+        it("will scroll to an anchor on click", async function (done) {
             $("#lab").html(
                 [
                     '<a href="#p1" class="pat-scroll" data-pat-scroll="trigger: click">p1</a>',
                     '<p id="p1"></p>',
                 ].join("\n")
             );
-            var $el = $(".pat-scroll");
-            // var spy_animate = spyOn($.fn, 'animate');
+            const $el = $(".pat-scroll");
+            const spy_animate = spyOn($.fn, "animate");
             pattern.init($el);
-            setTimeout(function () {
-                $el.click();
-                setTimeout(function () {
-                    // wait for scrolling via click to be done.
-                    // heisenbug: expect(spy_animate).toHaveBeenCalled();
-                    done();
-                }, 2000);
-            }, 2000);
+            await utils.timeout(1); // wait a tick for async to settle.
+            $el.click();
+            await utils.timeout(1); // wait a tick for async to settle.
+            // wait for scrolling via click to be done.
+            expect(spy_animate).toHaveBeenCalled();
+            done();
         });
 
-        it("will scroll to an anchor on pat-update with originalEvent of click", function (done) {
+        it("will scroll to an anchor on pat-update with originalEvent of click", async function (done) {
             $("#lab").html(
                 [
                     '<a href="#p1" class="pat-scroll" data-pat-scroll="trigger: click">p1</a>',
                     '<p id="p1"></p>',
                 ].join("\n")
             );
-            var $el = $(".pat-scroll");
-            // var spy_animate = spyOn($.fn, 'animate');
+            const $el = $(".pat-scroll");
+            const spy_animate = spyOn($.fn, "animate");
             pattern.init($el);
+            await utils.timeout(1); // wait a tick for async to settle.
             $el.trigger("pat-update", {
                 pattern: "stacks",
                 originalEvent: {
                     type: "click",
                 },
             });
-            setTimeout(function () {
-                // heisenbug: expect(spy_animate).toHaveBeenCalled();
-                console.log("Heisenbug");
-                done();
-            }, 3000);
+            expect(spy_animate).toHaveBeenCalled();
+            done();
         });
     });
 });
diff --git a/src/pat/slides/composed-injection-test.html b/src/pat/slides/composed-injection-test.html
index 747bd0842..7e39ef166 100644
--- a/src/pat/slides/composed-injection-test.html
+++ b/src/pat/slides/composed-injection-test.html
@@ -5,11 +5,6 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=1274, user-scalable=no" />
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/slides/index.html b/src/pat/slides/index.html
index f6bee1ec2..23aff9a1d 100644
--- a/src/pat/slides/index.html
+++ b/src/pat/slides/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Slideshows</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/slides/injection-test.html b/src/pat/slides/injection-test.html
index 3421034ef..340c890e8 100644
--- a/src/pat/slides/injection-test.html
+++ b/src/pat/slides/injection-test.html
@@ -5,11 +5,6 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=1274, user-scalable=no" />
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/slides/slides.js b/src/pat/slides/slides.js
index 58b37fade..91bc3dab3 100644
--- a/src/pat/slides/slides.js
+++ b/src/pat/slides/slides.js
@@ -3,9 +3,9 @@
  *
  * Copyright 2013 Simplon B.V. - Wichert Akkerman
  */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import registry from "../../core/registry";
-import Presentation from "slides/src/slides";
 import utils from "../../core/utils";
 import url from "../../core/url";
 import "../../core/remove";
@@ -18,14 +18,16 @@ var slides = {
         $(document).on("patterns-injected", utils.debounce(slides._reset, 100));
     },
 
-    init: function ($el) {
+    async init($el) {
+        await import("slides/src/slides"); // loads ``Presentation`` globally.
+
         var parameters = url.parameters();
         if (parameters.slides !== undefined) {
             var requested_ids = slides._collapse_ids(parameters.slides);
             if (requested_ids) slides._remove_slides($el, requested_ids);
         }
         $el.each(function () {
-            var presentation = new Presentation(this),
+            var presentation = new window.Presentation(this),
                 $container = $(this);
             $container
                 .data("pat-slide", presentation)
diff --git a/src/pat/slides/slides.test.js b/src/pat/slides/slides.test.js
index 1d52c71e5..6a44f28e2 100644
--- a/src/pat/slides/slides.test.js
+++ b/src/pat/slides/slides.test.js
@@ -3,37 +3,8 @@ import $ from "jquery";
 import utils from "../../core/utils";
 
 describe("pat-slides", function () {
-    beforeEach(function () {
-        $("<div/>", { id: "lab" }).appendTo(document.body);
-    });
-
     afterEach(function () {
-        $("#lab").remove();
-    });
-
-    describe("init", function () {
-        it("Return result from _hook", function () {
-            var spy_hook = spyOn(pattern, "_hook").and.callFake(function () {
-                return "jq";
-            });
-            var elements = $();
-            expect(pattern.init(elements)).toBe("jq");
-            expect(spy_hook).toHaveBeenCalledWith(elements);
-        });
-    });
-
-    describe("_hook", function () {
-        it("Return jQuery object", function () {
-            const mock = {
-                on: function () {
-                    return this;
-                },
-                off: function () {
-                    return this;
-                },
-            };
-            expect(pattern._hook(mock)).toBe(mock);
-        });
+        jest.restoreAllMocks();
     });
 
     describe("_collapse_ids", function () {
@@ -81,16 +52,17 @@ describe("pat-slides", function () {
             expect(ids).toEqual(["slide1", "slide3"]);
         });
 
-        xit("Trigger reset when removing slides", function () {
+        it.skip("Trigger reset when removing slides", function () {
             var $show = $("<div/>", { class: "pat-slides" });
-            for (var i = 1; i <= 4; i++)
+            for (var i = 1; i <= 4; i++) {
                 $("<div/>", { class: "slide", id: "slide" + i }).appendTo(
                     $show
                 );
-            spyOn(utils, "debounce").and.callFake(function (func) {
+            }
+            jest.spyOn(utils, "debounce").mockImplementation((func) => {
                 return func;
             });
-            var spy_reset = spyOn(pattern, "_reset");
+            var spy_reset = jest.spyOn(pattern, "_reset");
             pattern._hook($show);
             pattern._remove_slides($show, ["slide1", "slide3"]);
             expect(spy_reset).toHaveBeenCalled();
diff --git a/src/pat/slides/standalone-test.html b/src/pat/slides/standalone-test.html
index dacdd550a..66207b800 100644
--- a/src/pat/slides/standalone-test.html
+++ b/src/pat/slides/standalone-test.html
@@ -5,11 +5,6 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=1274, user-scalable=no" />
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/sortable/index.html b/src/pat/sortable/index.html
index 8891401f6..ffef9ccb7 100644
--- a/src/pat/sortable/index.html
+++ b/src/pat/sortable/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Sortable demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/stacks/index.html b/src/pat/stacks/index.html
index dbf66e304..5aba96a2a 100644
--- a/src/pat/stacks/index.html
+++ b/src/pat/stacks/index.html
@@ -5,11 +5,6 @@
         <title>Demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
         <link rel="stylesheet" href="/style/patterns.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/sticky/index.html b/src/pat/sticky/index.html
index eded25b21..8325367ac 100644
--- a/src/pat/sticky/index.html
+++ b/src/pat/sticky/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Sticky</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/sticky/sticky.js b/src/pat/sticky/sticky.js
index 246f77691..4226e4b8d 100644
--- a/src/pat/sticky/sticky.js
+++ b/src/pat/sticky/sticky.js
@@ -1,17 +1,22 @@
 /* pat-sticky - A pattern for a sticky polyfill */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import Base from "../../core/base";
 import Parser from "../../core/parser";
-import Stickyfill from "stickyfilljs";
 import utils from "../../core/utils";
 
+// Lazy loading modules.
+let Stickyfill;
+
 var parser = new Parser("sticky");
 parser.addArgument("selector", "");
 
 export default Base.extend({
     name: "sticky",
     trigger: ".pat-sticky",
-    init: function () {
+    async init() {
+        Stickyfill = await import("stickyfilljs");
+        Stickyfill = Stickyfill.default;
         this.options = parser.parse(this.$el);
         this.makeSticky();
         $("body").on(
@@ -36,8 +41,10 @@ export default Base.extend({
         } else {
             this.$stickies = this.$el.find(this.options.selector);
         }
-        this.$stickies.each(function (idx, elem) {
-            Stickyfill.add(elem);
-        });
+        this.$stickies.each(
+            function (idx, elem) {
+                Stickyfill.add(elem);
+            }.bind(this)
+        );
     },
 });
diff --git a/src/pat/subform/index.html b/src/pat/subform/index.html
index 94ac8afcd..f379df683 100644
--- a/src/pat/subform/index.html
+++ b/src/pat/subform/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Subform</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/switch/index.html b/src/pat/switch/index.html
index 405cd0f75..565e519de 100644
--- a/src/pat/switch/index.html
+++ b/src/pat/switch/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Switch demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/syntax-highlight/index.html b/src/pat/syntax-highlight/index.html
index 4e4a19070..86976233c 100644
--- a/src/pat/syntax-highlight/index.html
+++ b/src/pat/syntax-highlight/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>pat-syntax-highlight demo page</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/syntax-highlight/syntax-highlight.js b/src/pat/syntax-highlight/syntax-highlight.js
index 3c7bb5f94..42331365b 100644
--- a/src/pat/syntax-highlight/syntax-highlight.js
+++ b/src/pat/syntax-highlight/syntax-highlight.js
@@ -1,13 +1,19 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import Base from "../../core/base";
 import utils from "../../core/utils";
-import prettify from "google-code-prettify/src/prettify";
+
+// Lazy loading modules.
+let Prettify;
 
 export default Base.extend({
     name: "syntax-highlight",
     trigger: ".pat-syntax-highlight",
 
-    init: function () {
+    async init() {
+        Prettify = await import("google-code-prettify/src/prettify");
+        Prettify = Prettify.default;
+
         this.$el.addClass("prettyprint");
-        utils.debounce(prettify.prettyPrint, 50)();
+        utils.debounce(Prettify.prettyPrint, 50)();
     },
 });
diff --git a/src/pat/tabs/index.html b/src/pat/tabs/index.html
index e1e004329..d3201441a 100644
--- a/src/pat/tabs/index.html
+++ b/src/pat/tabs/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Tabs demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/toggle/index.html b/src/pat/toggle/index.html
index 0f90a2a2c..d660918e9 100644
--- a/src/pat/toggle/index.html
+++ b/src/pat/toggle/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Toggle</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/tooltip/index.html b/src/pat/tooltip/index.html
index 80c5132ad..f4351d66c 100644
--- a/src/pat/tooltip/index.html
+++ b/src/pat/tooltip/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <title>pat-tooltip demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/tooltip/tooltip.js b/src/pat/tooltip/tooltip.js
index 1730d0cc1..4bf3347c2 100644
--- a/src/pat/tooltip/tooltip.js
+++ b/src/pat/tooltip/tooltip.js
@@ -1,14 +1,14 @@
-import "../inject/inject"; // Register ``patterns-injected`` event handler
 import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import Base from "../../core/base";
 import logging from "../../core/logging";
 import Parser from "../../core/parser";
-import pat_markdown from "../markdown/markdown";
 import registry from "../../core/registry";
-import tippy from "tippy.js";
 import utils from "../../core/utils";
 
+// Lazy loading modules.
+let Tippy;
+
 const log = logging.getLogger("pat-tooltip");
 
 const parser = new Parser("tooltip");
@@ -41,16 +41,16 @@ export default Base.extend({
     name: "tooltip",
     trigger: ".pat-tooltip, .pat-tooltip-ng",
 
-    jquery_plugin: true,
-
     tippy: null,
-
     ajax_state: {
         isFetching: false,
         canFetch: true,
     },
 
-    init(el, opts) {
+    async init(el, opts) {
+        Tippy = await import("tippy.js");
+        Tippy = Tippy.default;
+
         if (el.jquery) {
             el = el[0];
         }
@@ -72,8 +72,8 @@ export default Base.extend({
             trigger: "click",
         };
 
-        tippy.setDefaultProps(defaultProps);
-        this.tippy = tippy(el, this.tippy_options);
+        Tippy.setDefaultProps(defaultProps);
+        this.tippy = new Tippy(el, this.tippy_options);
 
         if (el.getAttribute("title")) {
             // Remove title attribute to disable browser's built-in tooltip feature
@@ -331,7 +331,7 @@ export default Base.extend({
                 // TODO: use pat-inject, once it supports async
                 const response = await fetch(url);
                 const text = await response.text();
-                content = handler(text, url, selector, modifier);
+                content = await handler(text, url, selector, modifier);
             } catch (e) {
                 log.error(`Error on ajax request ${e}`);
             }
@@ -374,13 +374,15 @@ export default Base.extend({
         },
 
         // eslint-disable-next-line no-unused-vars
-        markdown(text, url, selector, modifier) {
-            const pat = pat_markdown.init($("<div/>"));
+        async markdown(text, url, selector, modifier) {
+            const pat_markdown = await import("../markdown/markdown");
+            const pat = pat_markdown.default.init($("<div/>"));
             const cfg = { url };
             if (selector) {
                 cfg.source = selector;
             }
-            return pat.renderForInjection(cfg, text)[0];
+            const ret = await pat.renderForInjection(cfg, text);
+            return ret[0];
         },
     },
 });
diff --git a/src/pat/tooltip/tooltip.test.js b/src/pat/tooltip/tooltip.test.js
index a6d340a18..16b1079db 100644
--- a/src/pat/tooltip/tooltip.test.js
+++ b/src/pat/tooltip/tooltip.test.js
@@ -1,6 +1,5 @@
 import $ from "jquery";
 import autosubmit from "../auto-submit/auto-submit";
-import logging from "../../core/logging";
 import pattern from "./tooltip";
 import registry from "../../core/registry";
 import utils from "../../core/utils";
@@ -10,10 +9,6 @@ const mockFetch = (text = "") => () =>
         text: () => Promise.resolve(text),
     });
 
-jest.setTimeout(1000000);
-
-let start;
-const log = logging.getLogger("pat-tooltip.tests");
 const testutils = {
     createTooltip(c) {
         var cfg = c || {};
@@ -58,16 +53,6 @@ const testutils = {
         testutils.dispatchEvent($target, "mouseleave");
     },
 
-    delayed(name, timeout) {
-        return (...args) => {
-            setTimeout(() => {
-                pattern[name].and.callThrough();
-                pattern[name].apply(null, args);
-                pattern[name].and.callFake(testutils.delayed(name, timeout));
-            }, timeout);
-        };
-    },
-
     stopwatch(spy, name, timer) {
         return (...args) => {
             timer[name] = Date.now();
@@ -76,19 +61,12 @@ const testutils = {
             spy.and.callFake(testutils.stopwatch(name, timer));
         };
     },
-
-    log(msg) {
-        log.debug(String(Date.now() - start) + " " + msg);
-    },
 };
 
-log.setLevel(20);
-
 describe("pat-tooltip", () => {
     beforeEach(() => {
         testutils.cleanup();
         $("<div/>", { id: "lab" }).appendTo(document.body);
-        start = Date.now();
     });
 
     afterEach(() => {
@@ -102,6 +80,7 @@ describe("pat-tooltip", () => {
                 title: "tooltip",
             });
             const instance = new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -122,6 +101,7 @@ describe("pat-tooltip", () => {
                 const title = el.title;
 
                 const instance = new pattern($el);
+                await utils.timeout(1);
 
                 // NOTE 1:
                 // spy on tippy instance's "onShow", which holds the reference
@@ -165,6 +145,7 @@ describe("pat-tooltip", () => {
 
                 new pattern($el1);
                 new pattern($el2);
+                await utils.timeout(1);
 
                 let container;
 
@@ -191,6 +172,7 @@ describe("pat-tooltip", () => {
                         "source: title; trigger: click; class: wasabi kohlrabi",
                 });
                 new pattern($el);
+                await utils.timeout(1);
 
                 testutils.click($el);
                 await utils.timeout(1);
@@ -215,6 +197,8 @@ describe("pat-tooltip", () => {
                 const $el = $(el);
                 const title = el.title;
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const timer = {};
 
                 const spy_trigger = spyOn(instance.tippy.props, "onTrigger");
@@ -250,6 +234,8 @@ describe("pat-tooltip", () => {
                     data: "trigger: click; closing: auto",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const tp = instance.tippy.props;
                 const spy_show = spyOn(tp, "onShow").and.callThrough();
                 const spy_hide = spyOn(tp, "onHide").and.callThrough();
@@ -280,6 +266,8 @@ describe("pat-tooltip", () => {
                     data: "trigger: hover; closing: auto",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const tp = instance.tippy.props;
                 const spy_show = spyOn(tp, "onShow").and.callThrough();
                 const spy_hide = spyOn(tp, "onHide").and.callThrough();
@@ -308,6 +296,8 @@ describe("pat-tooltip", () => {
                     data: "trigger: click; closing: sticky",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const tp = instance.tippy.props;
                 const spy_show = spyOn(tp, "onShow").and.callThrough();
                 const spy_hide = spyOn(tp, "onHide").and.callThrough();
@@ -338,6 +328,8 @@ describe("pat-tooltip", () => {
                     data: "trigger: hover; closing: sticky",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const tp = instance.tippy.props;
                 const spy_show = spyOn(tp, "onShow").and.callThrough();
                 const spy_hide = spyOn(tp, "onHide").and.callThrough();
@@ -365,6 +357,8 @@ describe("pat-tooltip", () => {
                     data: "trigger: click; closing: close-button",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const tp = instance.tippy.props;
                 const spy_show = spyOn(tp, "onShow").and.callThrough();
                 const spy_hide = spyOn(tp, "onHide").and.callThrough();
@@ -401,6 +395,7 @@ describe("pat-tooltip", () => {
                     data: "trigger: hover; closing: close-button",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
                 const tp = instance.tippy.props;
                 const spy_show = spyOn(tp, "onShow").and.callThrough();
                 const spy_hide = spyOn(tp, "onHide").and.callThrough();
@@ -446,6 +441,8 @@ describe("pat-tooltip", () => {
 
             const instance1 = new pattern($el1);
             const instance2 = new pattern($el2);
+            await utils.timeout(1);
+
             const spy_show1 = spyOn(
                 instance1.tippy.props,
                 "onShow"
@@ -492,6 +489,7 @@ describe("pat-tooltip", () => {
                 data: "position-list: lt",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -508,6 +506,7 @@ describe("pat-tooltip", () => {
                 data: "position-list: lb",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -521,8 +520,8 @@ describe("pat-tooltip", () => {
             const $el = testutils.createTooltip({
                 data: "position-list: lm",
             });
-
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -536,8 +535,8 @@ describe("pat-tooltip", () => {
             const $el = testutils.createTooltip({
                 data: "position-list: bl",
             });
-
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -551,8 +550,8 @@ describe("pat-tooltip", () => {
             const $el = testutils.createTooltip({
                 data: "position-list: br",
             });
-
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -566,8 +565,8 @@ describe("pat-tooltip", () => {
             const $el = testutils.createTooltip({
                 data: "position-list: bm",
             });
-
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -582,8 +581,8 @@ describe("pat-tooltip", () => {
                 const $el = testutils.createTooltip({
                     data: "position-list: tl; position-policy: force",
                 });
-
                 new pattern($el);
+                await utils.timeout(1);
 
                 testutils.click($el);
                 await utils.timeout(1);
@@ -599,8 +598,8 @@ describe("pat-tooltip", () => {
                 const $el = testutils.createTooltip({
                     data: "position-list: tr; position-policy: force",
                 });
-
                 new pattern($el);
+                await utils.timeout(1);
 
                 testutils.click($el);
                 await utils.timeout(1);
@@ -616,8 +615,8 @@ describe("pat-tooltip", () => {
                 const $el = testutils.createTooltip({
                     data: "position-list: tm; position-policy: force",
                 });
-
                 new pattern($el);
+                await utils.timeout(1);
 
                 testutils.click($el);
                 await utils.timeout(1);
@@ -631,8 +630,8 @@ describe("pat-tooltip", () => {
                 const $el = testutils.createTooltip({
                     data: "position-list: rt; position-policy: force",
                 });
-
                 new pattern($el);
+                await utils.timeout(1);
 
                 testutils.click($el);
                 await utils.timeout(1);
@@ -648,8 +647,8 @@ describe("pat-tooltip", () => {
                 const $el = testutils.createTooltip({
                     data: "position-list: rb; position-policy: force",
                 });
-
                 new pattern($el);
+                await utils.timeout(1);
 
                 testutils.click($el);
                 await utils.timeout(1);
@@ -665,8 +664,8 @@ describe("pat-tooltip", () => {
                 const $el = testutils.createTooltip({
                     data: "position-list: rm; position-policy: force",
                 });
-
                 new pattern($el);
+                await utils.timeout(1);
 
                 testutils.click($el);
                 await utils.timeout(1);
@@ -687,6 +686,8 @@ describe("pat-tooltip", () => {
                 });
                 const el = $el[0];
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const spy_show = spyOn(
                     instance.tippy.props,
                     "onShow"
@@ -731,6 +732,8 @@ describe("pat-tooltip", () => {
                 });
                 const el = $el[0];
                 const instance = new pattern($el);
+                await utils.timeout(1);
+
                 const spy_show = spyOn(
                     instance.tippy.props,
                     "onShow"
@@ -780,6 +783,8 @@ describe("pat-tooltip", () => {
                     const title = el.title;
 
                     const instance = new pattern($el);
+                    await utils.timeout(1);
+
                     const spy_show = spyOn(instance.tippy.props, "onShow");
 
                     // The 'title' attr gets removed, otherwise the browser's
@@ -805,6 +810,8 @@ describe("pat-tooltip", () => {
                     });
 
                     const instance = new pattern($el);
+                    await utils.timeout(1);
+
                     const spy_hide = spyOn(instance.tippy.props, "onHide");
 
                     // Shortcut any checks for mouse positions and just hide.
@@ -838,6 +845,8 @@ describe("pat-tooltip", () => {
                         content: content,
                     });
                     const instance = new pattern($el);
+                    await utils.timeout(1);
+
                     const spy_show = spyOn(
                         instance.tippy.props,
                         "onShow"
@@ -862,6 +871,8 @@ describe("pat-tooltip", () => {
                     href: "#",
                 });
                 new pattern($el);
+                await utils.timeout(1);
+
                 testutils.click($el);
                 await utils.timeout(1);
 
@@ -879,6 +890,8 @@ describe("pat-tooltip", () => {
                     href: "#",
                 });
                 new pattern($el);
+                await utils.timeout(1);
+
                 testutils.click($el);
                 await utils.timeout(1);
 
@@ -907,6 +920,8 @@ describe("pat-tooltip", () => {
                 document.body.appendChild(container);
 
                 new pattern($el);
+                await utils.timeout(1);
+
                 testutils.click($el);
                 await utils.timeout(1);
 
@@ -927,6 +942,9 @@ describe("pat-tooltip", () => {
             });
             const title = $el[0].title;
             new pattern($el);
+            await utils.timeout(1);
+
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -946,6 +964,7 @@ describe("pat-tooltip", () => {
                 content: content,
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1);
@@ -969,6 +988,7 @@ describe("pat-tooltip", () => {
                 href: "http://test.com",
             });
             const instance = new pattern($el);
+            await utils.timeout(1);
 
             const spy_content = spyOn(
                 instance,
@@ -1007,6 +1027,7 @@ describe("pat-tooltip", () => {
                 href: "#lab",
             });
             const instance = new pattern($el);
+            await utils.timeout(1);
 
             const spy_content = spyOn(
                 instance,
@@ -1035,7 +1056,7 @@ describe("pat-tooltip", () => {
     });
 
     describe(`if the 'source' parameter is 'ajax'`, () => {
-        it("the default click action is prevented", (done) => {
+        it("the default click action is prevented", async (done) => {
             global.fetch = jest.fn().mockImplementation(mockFetch());
 
             const $el = testutils.createTooltip({
@@ -1043,6 +1064,8 @@ describe("pat-tooltip", () => {
                 href: "tests/content.html#content",
             });
             const instance = new pattern($el);
+            await utils.timeout(1);
+
             const click = new Event("click");
 
             const call_order = [];
@@ -1081,6 +1104,7 @@ describe("pat-tooltip", () => {
                 href: "http://test.com#content",
             });
             const instance = new pattern($el);
+            await utils.timeout(1);
 
             const spy_ajax = spyOn(instance, "_getContent").and.callThrough();
             const spy_show = spyOn(
@@ -1110,13 +1134,11 @@ describe("pat-tooltip", () => {
                 data: "source: ajax; ajax-data-type: markdown",
                 href: "http://test.com",
             });
-            const instance = new pattern($el);
+            const instance = await new pattern($el);
+            await utils.timeout(1);
 
-            const spy_ajax = spyOn(instance, "_getContent").and.callThrough();
-            const spy_show = spyOn(
-                instance.tippy.props,
-                "onShow"
-            ).and.callThrough();
+            const spy_ajax = jest.spyOn(instance, "_getContent");
+            const spy_show = jest.spyOn(instance.tippy.props, "onShow");
 
             testutils.click($el);
             await utils.timeout(1); // wait a tick for async fetch
@@ -1153,6 +1175,7 @@ this will be extracted.
                 href: "http://test.com/#hello",
             });
             const instance = new pattern($el);
+            await utils.timeout(1);
 
             const spy_ajax = spyOn(instance, "_getContent").and.callThrough();
             const spy_show = spyOn(
@@ -1194,6 +1217,7 @@ this will be extracted.
                     href: "http://test.com",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
 
                 const spy_ajax = spyOn(
                     instance,
@@ -1246,6 +1270,7 @@ this will be extracted.
                     href: "http://test.com",
                 });
                 const instance = new pattern($el);
+                await utils.timeout(1);
 
                 const spy_ajax = spyOn(
                     instance,
@@ -1302,6 +1327,7 @@ this will be extracted.
                 href: "http://test.com",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1); // wait a tick for async fetch
@@ -1332,6 +1358,7 @@ this will be extracted.
                 href: "http://test.com",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             const instance2 = new autosubmit($(form));
             const spy_handler1 = spyOn(
@@ -1365,6 +1392,7 @@ this will be extracted.
                 data: "source: content; trigger: click",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             const spy_scan = spyOn(registry, "scan");
 
@@ -1392,6 +1420,7 @@ this will be extracted.
                 href: "http://test.com/#outer::element",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1); // wait a tick for async fetch
@@ -1418,6 +1447,7 @@ this will be extracted.
                 href: "http://test.com/#outer",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1); // wait a tick for async fetch
@@ -1443,6 +1473,7 @@ this will be extracted.
                 href: "#local-content::element",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1); // wait a tick for async fetch
@@ -1467,6 +1498,7 @@ this will be extracted.
                 href: "#local-content",
             });
             new pattern($el);
+            await utils.timeout(1);
 
             testutils.click($el);
             await utils.timeout(1); // wait a tick for async fetch
@@ -1486,9 +1518,10 @@ this will be extracted.
     });
 
     describe("URL splitting", () => {
-        it("it extracts the correct parts from any url", (done) => {
+        it("it extracts the correct parts from any url", async (done) => {
             const $el = testutils.createTooltip({});
             const instance = new pattern($el);
+            await utils.timeout(1);
 
             let parts = instance.get_url_parts(
                 "https://text.com/#selector::modifier"
diff --git a/src/pat/validation/index.html b/src/pat/validation/index.html
index 85844ca14..3d302b2c4 100644
--- a/src/pat/validation/index.html
+++ b/src/pat/validation/index.html
@@ -4,11 +4,6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <title>Form validation</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index cf429cd1e..328e96717 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -4,13 +4,16 @@
  * Copyright 2013 Simplon B.V. - Wichert Akkerman
  * Copyright 2014-2015 Syslab.com GmBH  - JC Brand
  */
+import "regenerator-runtime/runtime"; // needed for ``await`` support
 import $ from "jquery";
 import _ from "underscore";
 import Parser from "../../core/parser";
 import Base from "../../core/base";
 import utils from "../../core/utils";
-import moment from "moment";
-import validate from "validate.js";
+
+// Lazy loading modules.
+let Validate;
+let Moment;
 
 const parser = new Parser("validation");
 parser.addArgument("disable-selector"); // Elements which must be disabled if there are errors
@@ -45,27 +48,18 @@ const VALIDATION_TYPE_MAP = {
     date: "date",
 };
 
-// Before using it we must add the parse and format functions
-// Here is a sample implementation using moment.js
-validate.moment = moment;
-validate.extend(validate.validators.datetime, {
-    // The value is guaranteed not to be null or undefined but otherwise it
-    // could be anything.
-    parse: function (value) {
-        return +moment.utc(value);
-    },
-    // Input is a unix timestamp
-    format: function (value, options) {
-        var format = options.dateOnly ? "YYYY-MM-DD" : "YYYY-MM-DD hh:mm:ss";
-        return moment.utc(value).format(format);
-    },
-});
-
 export default Base.extend({
     name: "validation",
     trigger: "form.pat-validation",
 
-    init: function ($el, opts) {
+    async init($el, opts) {
+        Validate = await import("validate.js");
+        Validate = Validate.default;
+        Moment = await import("moment");
+        Moment = Moment.default;
+
+        this.extend_validate();
+
         this.errors = 0;
         this.options = parser.parse(this.$el, opts);
         this.$inputs = this.$el.find(
@@ -107,6 +101,26 @@ export default Base.extend({
         );
     },
 
+    extend_validate() {
+        // Before using it we must add the parse and format functions
+        // Here is a sample implementation using moment.js
+        Validate.moment = Moment;
+        Validate.extend(Validate.validators.datetime, {
+            // The value is guaranteed not to be null or undefined but otherwise it
+            // could be anything.
+            parse: function (value) {
+                return +Moment.utc(value);
+            },
+            // Input is a unix timestamp
+            format: function (value, options) {
+                var format = options.dateOnly
+                    ? "YYYY-MM-DD"
+                    : "YYYY-MM-DD hh:mm:ss";
+                return Moment.utc(value).format(format);
+            },
+        });
+    },
+
     getFieldType: function (input) {
         var opts = parser.parse($(input));
         var type = input.getAttribute("type");
@@ -138,7 +152,7 @@ export default Base.extend({
             }
             var relative_constraint =
                 relation === "before" ? "earliest" : "latest";
-            if (validate.moment.isDate(relative)) {
+            if (Validate.moment.isDate(relative)) {
                 c[relative_constraint] = relative;
             } else {
                 try {
@@ -350,11 +364,11 @@ export default Base.extend({
          */
         var opts = parser.parse($(input));
         if (msg.indexOf("must be greater than or equal to") != -1) {
-            return validate.format(opts.message.min, {
+            return Validate.format(opts.message.min, {
                 count: input.getAttribute("min"),
             });
         } else if (msg.indexOf("must be less than or equal to") != -1) {
-            return validate.format(opts.message.max, {
+            return Validate.format(opts.message.max, {
                 count: input.getAttribute("max"),
             });
         } else if (msg.indexOf("is not a number") != -1) {
@@ -368,8 +382,8 @@ export default Base.extend({
     validateGroupedElement: function (name) {
         /* Handler which gets called for :checkbox and :radio elments. */
         var input = this.$el.find('[name="' + name + '"]')[0];
-        var error = validate(
-            _.pick(validate.collectFormValues(this.$el), name),
+        var error = Validate(
+            _.pick(Validate.collectFormValues(this.$el), name),
             this.getConstraints(input)
         );
         if (!error) {
@@ -393,7 +407,7 @@ export default Base.extend({
         if (input.disabled) {
             return;
         }
-        var error = validate(
+        var error = Validate(
             this.getValueDict(input),
             this.getConstraints(input)
         );
diff --git a/src/pat/validation/validation.test.js b/src/pat/validation/validation.test.js
index 896a4c4de..2ccc59c3f 100644
--- a/src/pat/validation/validation.test.js
+++ b/src/pat/validation/validation.test.js
@@ -1,5 +1,6 @@
-import pattern from "./validation";
 import $ from "jquery";
+import pattern from "./validation";
+import utils from "../../core/utils";
 
 describe("pat-validation", function () {
     beforeEach(function () {
@@ -10,13 +11,14 @@ describe("pat-validation", function () {
         $("#lab").remove();
     });
 
-    it("validates required inputs", function () {
+    it("validates required inputs", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="text" name="name" required="required">' +
                 "</form>"
         );
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $el.find(":input").trigger("change");
         expect($el.find("em.warning").length).toBe(1);
 
@@ -27,17 +29,19 @@ describe("pat-validation", function () {
                 "</form>"
         );
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $el.find(":input").trigger("change");
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("validates required pat-autosuggest inputs on form submit", function () {
+    it("validates required pat-autosuggest inputs on form submit", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="hidden" name="name" required="required" class="pat-autosuggest" data-pat-autosuggest="words: one, two">' +
                 "</form>"
         );
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $el.submit();
         expect($el.find("em.warning").length).toBe(1);
 
@@ -48,22 +52,24 @@ describe("pat-validation", function () {
                 "</form>"
         );
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $el.submit();
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("validates required inputs with HTML5 required attribute style", function () {
+    it("validates required inputs with HTML5 required attribute style", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="text" name="name" required>' +
                 "</form>"
         );
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $el.find(":input").trigger("change");
         expect($el.find("em.warning").length).toBe(1);
     });
 
-    it("can show custom validation messages", function () {
+    it("can show custom validation messages", async function () {
         var $el = $(
             '<form class="pat-validation" data-pat-validation="message-required: I\'m sorry Dave, I can\'t let you do that.">' +
                 '<input type="text" name="name" required="required">' +
@@ -71,6 +77,7 @@ describe("pat-validation", function () {
         );
         var $input = $el.find(":input");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -78,7 +85,7 @@ describe("pat-validation", function () {
         );
     });
 
-    it("can show custom per-field validation messages", function () {
+    it("can show custom per-field validation messages", async function () {
         var $el = $(
             '<form class="pat-validation" data-pat-validation="message-required: I\'m sorry Dave, I can\'t let you do that.">' +
                 '<input type="text" name="name" required="required" data-pat-validation="message-required: Computer says no">' +
@@ -86,12 +93,13 @@ describe("pat-validation", function () {
         );
         var $input = $el.find(":input");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe("Computer says no");
     });
 
-    it("validates email inputs", function () {
+    it("validates email inputs", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="email" name="email">' +
@@ -100,6 +108,7 @@ describe("pat-validation", function () {
         var $input = $el.find(":input");
         $input.val("invalid email");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -113,11 +122,12 @@ describe("pat-validation", function () {
         $input = $el.find(":input");
         $input.val("person@mail.com");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("validates number limits", function () {
+    it("validates number limits", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="number" min="5" name="number">' +
@@ -126,6 +136,7 @@ describe("pat-validation", function () {
         var $input = $el.find(":input");
         $input.val(4);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -134,6 +145,7 @@ describe("pat-validation", function () {
 
         $input.val(6);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(0);
 
@@ -145,6 +157,7 @@ describe("pat-validation", function () {
         $input = $el.find(":input");
         $input.val(6);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -152,7 +165,7 @@ describe("pat-validation", function () {
         );
     });
 
-    it("validates integers", function () {
+    it("validates integers", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="number" name="integer" data-pat-validation="type: integer;">' +
@@ -161,6 +174,7 @@ describe("pat-validation", function () {
         var $input = $el.find(":input");
         $input.val(4.5);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -176,6 +190,7 @@ describe("pat-validation", function () {
         $input = $el.find(":input");
         $input.val(4.5);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe("Slegs heelgetalle");
@@ -186,7 +201,7 @@ describe("pat-validation", function () {
     // setting values.
     // See: https://twitter.com/thetetet/status/1285239806205755393
 
-    it("validates dates", function () {
+    it("validates dates", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="text" name="date" data-pat-validation="type: date">' +
@@ -196,6 +211,7 @@ describe("pat-validation", function () {
         var $input = $el.find(":input");
         $input.val("2000-02-30");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -207,7 +223,7 @@ describe("pat-validation", function () {
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("validates dates with before/after constraints", function () {
+    it("validates dates with before/after constraints", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="text" id="start" name="start" data-pat-validation="type: date; not-after: #end; message-date: The start date must on or before the end date.">' +
@@ -217,6 +233,7 @@ describe("pat-validation", function () {
         $("#lab").append($el);
 
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
 
         var $start = $el.find("#start");
         var $end = $el.find("#end");
@@ -272,7 +289,7 @@ describe("pat-validation", function () {
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("doesn't validate empty optional dates", function () {
+    it("doesn't validate empty optional dates", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="text" name="date" data-pat-validation="type: date">' +
@@ -282,11 +299,12 @@ describe("pat-validation", function () {
         var $input = $el.find(":input");
         $input.val("");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("do require-validate non-empty required dates", function () {
+    it("do require-validate non-empty required dates", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="text" name="date" required="required" data-pat-validation="type: date">' +
@@ -296,24 +314,26 @@ describe("pat-validation", function () {
         var $input = $el.find(":input");
         $input.val("");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
 
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe("This field is required");
     });
 
-    it("doesn't validate disabled elements", function () {
+    it("doesn't validate disabled elements", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<input type="text" name="disabled" required="required" disabled="disabled">' +
                 "</form>"
         );
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $el.find(":input").trigger("change");
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("validates radio buttons", function () {
+    it("validates radio buttons", async function () {
         var $el = $(
             '<form class="pat-validation">' +
                 '<label><input name="colour" required="required" type="radio" value="blue"/> Blue</label>' +
@@ -323,6 +343,7 @@ describe("pat-validation", function () {
                 "</form>"
         );
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $el.submit();
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe("This field is required");
@@ -336,7 +357,7 @@ describe("pat-validation", function () {
         expect($el.find("em.warning").length).toBe(0);
     });
 
-    it("removes a field's error message if it becomes valid", function () {
+    it("removes a field's error message if it becomes valid", async function () {
         /* Check that an error message appears after the field with invalid data.
          * Also check that the message gets removed if the field's data
          * becomes valid, but that other messages are *not* removed.
@@ -350,6 +371,7 @@ describe("pat-validation", function () {
         var $input1 = $el.find(':input[name="integer1"]');
         $input1.val(4.5);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input1.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -372,7 +394,7 @@ describe("pat-validation", function () {
         expect($el.find("em.warning").length).toBe(1);
     });
 
-    it("can disable certain form elements when validation fails", function () {
+    it("can disable certain form elements when validation fails", async function () {
         /* Tests the disable-selector argument */
         var $el = $(
             '<form class="pat-validation" data-pat-validation="disable-selector:#form-buttons-create">' +
@@ -384,6 +406,7 @@ describe("pat-validation", function () {
         var $input = $el.find(":input");
         $input.val(4.5);
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $input.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
@@ -397,7 +420,7 @@ describe("pat-validation", function () {
         expect($el.find("#form-buttons-create")[0].disabled).toBe(false);
     });
 
-    it("can check for password confirmation", function () {
+    it("can check for password confirmation", async function () {
         var $el = $(
             '<form class="pat-validation" data-pat-validation="disable-selector:#form-buttons-create">' +
                 '  <input type="password" name="password">' +
@@ -413,6 +436,7 @@ describe("pat-validation", function () {
         $password.val("foo");
         $password_confirmation.val("bar");
         pattern.init($el);
+        await utils.timeout(1); // wait a tick for async to settle.
         $password_confirmation.trigger("change");
         expect($el.find("em.warning").length).toBe(1);
         expect($el.find("em.warning").text()).toBe(
diff --git a/src/pat/zoom/index.html b/src/pat/zoom/index.html
index 66f31a937..b469d945f 100644
--- a/src/pat/zoom/index.html
+++ b/src/pat/zoom/index.html
@@ -3,11 +3,6 @@
     <head>
         <title>Zoom pattern demo</title>
         <link rel="stylesheet" href="/style/common.css" type="text/css" />
-        <script
-            src="/dist/bundle-vendors.js"
-            type="text/javascript"
-            charset="utf-8"
-        ></script>
         <script
             src="/dist/bundle.js"
             type="text/javascript"
diff --git a/src/patterns.js b/src/patterns.js
index a946bb9ab..9efd89b01 100644
--- a/src/patterns.js
+++ b/src/patterns.js
@@ -14,7 +14,6 @@
 // Import base
 import registry from "./core/registry.js";
 import jquery from "jquery";
-import "prefixfree";
 
 // Import all used patterns for the bundle to be generated
 import "./core/push_kit.js";
@@ -74,29 +73,5 @@ import "./pat/zoom/zoom.js";
 // example pattern
 import "./pat/minimalpattern/minimalpattern";
 
-// Import locales for moment
-import "moment/locale/de";
-// import 'moment/locale/bg';
-// import 'moment/locale/hr';
-// import 'moment/locale/cs';
-// import 'moment/locale/da';
-// import 'moment/locale/nl';
-// import 'moment/locale/es';
-// import 'moment/locale/fi';
-// import 'moment/locale/fr';
-// import 'moment/locale/el';
-// import 'moment/locale/hu';
-// import 'moment/locale/it';
-// import 'moment/locale/lt';
-// import 'moment/locale/lv';
-// import 'moment/locale/mt';
-// import 'moment/locale/pl';
-// import 'moment/locale/pt';
-// import 'moment/locale/ro';
-// import 'moment/locale/sl';
-// import 'moment/locale/sk';
-// import 'moment/locale/es';
-// import 'moment/locale/sv';
-
 window.jQuery = jquery;
 registry.init();
diff --git a/src/setupTests.js b/src/setupTests.js
index 9fd7560bb..3d9664a4e 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -27,3 +27,7 @@ document.fullscreenerror = jest.fn();
 // pat-subform
 // See https://github.com/jsdom/jsdom/issues/1937#issuecomment-461810980
 window.HTMLFormElement.prototype.submit = () => {};
+
+// Do not output error messages
+import logging from "./core/logging";
+logging.setLevel(50); // level: FATAL
diff --git a/webpack/base.config.js b/webpack/base.config.js
index eb12687ef..29d34e18b 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -28,21 +28,10 @@ module.exports = (env) => {
             path: path.resolve(__dirname, "../dist"),
         },
         optimization: {
-            splitChunks: {
-                chunks: "async",
-                cacheGroups: {
-                    commons: {
-                        test: /[\\/]node_modules[\\/]/,
-                        name: "vendors",
-                        chunks: "initial",
-                        filename: "bundle-[name].js",
-                    },
-                },
-            },
             minimize: true,
             minimizer: [
                 new TerserPlugin({
-                    include: /(\.min\.js$|bundle-vendors.js$)/,
+                    include: /(\.min\.js$)/,
                     extractComments: false,
                     terserOptions: {
                         output: {
diff --git a/yarn.lock b/yarn.lock
index 9ef1f4b8a..3a97bff5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6128,11 +6128,6 @@ postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-prefixfree@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prefixfree/-/prefixfree-1.0.0.tgz#82b0edbbac107f2a3e2dc569d6c3df4035cd7910"
-  integrity sha1-grDtu6wQfyo+LcVp1sPfQDXNeRA=
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"