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.