import() on user interaction

Dynamic import() can be used to import a module after the user interacts with the page. This page contains an inline script that downloads the form-validation.js module after the user interacts with the form elements.

This example uses named exports instead of the default export used in the previous demo.

View Source Code

document.querySelectorAll("form input").forEach((input) => {
  input.addEventListener(
    "focus",
    async () => {
      const form = input.closest("form");
      const { validate } = await import("../form-validation.js?delay=1000");

      form.querySelector("[type=submit]").removeAttribute("disabled");
      form.addEventListener("submit", validate(form));
    },
    { once: true }
  );
})

Learn Performance - Dynamic import()

import() on user interaction