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.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025