Dynamically Import ESM Modules From A CDN

Lazy load JavaScript code from a content delivery network to serve users only what they need when they need it.

Photo by Daniel Born on Unsplash

What if I told you modern browsers can natively import a single, or sets of functions, of a JavaScript library bundles, at runtime and, from a CDN? Wouldn’t that open up possibilities?

Well, good news. This is not an hypothesis but, a fact. Nowadays, all modern browsers can dynamically import JavaScript modules from content delivery networks 🥳.

Introduction

There are a number of libraries and frameworks that enable module usage when developing web frontend applications. Most apps and libraries will have their files “bundled” using tools like Webpack, Rollup or with more recent bundler such as esbuild.

Thanks to these tools, the JavaScript code can be analyzed, build and split into smaller chunks.

While this approach works like a charm, it has for downside that ES modules are imported regardless if executed or not.

For example, if you would use an awesome library such as idb-keyval to print out a value stored in IndexedDB but, had for goal to reserve the function to administrators only.

import { get } from 'idb-keyval';

const print = async (admin) => {
  if (!admin) {
    return;
  }
  
  console.log(await get('hello'));
}

If the code is build statically, the third party dependency would be added to the ES modules no matter what. As a result, all users, administrators or not, would have to download the related code even if they would never require it.

This is when dynamic import, part of the official TC39 proposal and which has been standardized with ECMAScript 2020, comes into play.

It tells the browser to load code on demand and only when it is required.

const print = async (admin) => {
  if (!admin) {
    return;
  }

  const { get } = await import('idb-keyval');

  console.log(await get('hello'));
}

Only the administrators would now have to download the code of the third party library.