JavaScript Dynamic Imports

Learn this new, upcoming feature of JavaScript

I have never had the privilege to use dynamic imports until very recently when I used them to power code splitting in a Next.js application, and I had to do a bit of research because they are slightly different from static imports.

A static import of an ES Module default export looks like this:

import moment from 'moment'

You can use object destructuring to get a named export:

import { format } from 'date-fns'

Static imports have some limits:

  • they are limited to the top level of the file
  • they can’t be loaded conditionally (inside an if)
  • the name of the package can’t be determined at execution time

Dynamic imports can do all those things!

The syntax is a little bit different.

And they work within modules.

You use them like this:

const module = await import('module')

and to use the default export, you must first call .default().

Example using moment:

const moment = (await import('moment')).default()

Named imports on the other hand work as expected:

const { format } = await import('date-fns')

Can you use them today? Yes! The browser support is already pretty good, and there’s also a Babel plugin.

Download my free JavaScript Beginner's Handbook and check out my JavaScript Course!

👀 Sign up to my premium courses 🔥