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.
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X