Dynamic `import()`

Published 21 November 2017 · Tagged with ECMAScript ES2020

super()). That means that import doesn’t inherit from Function.prototype so you cannot call or apply it, and things like const importAlias = import don’t work — heck, import is not even an object! This doesn’t really matter in practice, though.

Here’s an example of how dynamic import() enables lazy-loading modules upon navigation in a small single-page application:

<!DOCTYPE html>
<meta charset="utf-8">
<title>My library</title>
<nav>
  <a href="books.html" data-entry-module="books">Books</a>
  <a href="movies.html" data-entry-module="movies">Movies</a>
  <a href="video-games.html" data-entry-module="video-games">Video Games</a>
</nav>
<main>This is a placeholder for the content that will be loaded on-demand.</main>
<script>
  const main = document.querySelector('main');
  const links = document.querySelectorAll('nav > a');
  for (const link of links) {
    link.addEventListener('click', async (event) => {
      event.preventDefault();
      try {
        const module = await import(`/${link.dataset.entryModule}.mjs`);
        / The module exports a function named `loadPageInto`.
        module.loadPageInto(main);
      } catch (error) {
        main.textContent = error.message;
      }
    });
  }
</script>

The lazy-loading capabilities enabled by dynamic import() can be quite powerful when applied correctly. For demonstration purposes, @mathias).Edit this page on GitHub

Except as otherwise noted, any code samples from the V8 project are licensed under the Creative Commons Attribution 3.0 License. For details, see our site policies.