Skip to content

JavaScript Dynamic Imports

New Courses Coming Soon

Join the waiting lists

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:

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.

→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code

Here is how can I help you: