Conditionally import modules in JavaScript

In this tutorial, we will see how to dynamically or conditionally import modules in JavaScript.

Even though dynamic imports are not good for performance as they block the tree-shaking of code, there are scenarios where we need to conditionally import modules.

Do this won’t work

import foo from `${folder}/bar.js`

To make the dynamic import, we need to use the await keyword.

// default import
const foo = await import(folder + '/bar.js')

// default import 2
const foo = (await import(folder + '/bar.js')).default()

// named import
const { foo } = await import(folder + '/bar.js')

As you can see using this you can do default import as well as named import dynamically.