ES6 dynamic import syntax allows to dynamically import modules on the fly using special import syntax instead of the traditional import/export syntax.
As a frontend developer you may have used the import/export keywords to import and export modules in your javascript application. This is type of import is called static import.
An example of static import:
import ModuleA from "./modules/ModuleA";
Or
import { func } from "./modules.js";
However static imports have some limitations. For example you cannot use conditionals when using static import:
const a = 3;
if(a === 3) {
import ModuleA from "./modules.js"; // Error, invalid syntax
}
Also you can’t use static import in function body to import something at runtime:
function calculate()
{
import { sum } from "./modules.js"; // Incorrect, invalid syntax
console.log(sum(1, 5));
}
calculate();
To address these constraints, the dynamic import syntax comes to the rescue, the general structure of this syntax:
import('module-path.js')
Note that this is an expression, it may seem like a function but it’s not and it doesn’t inherit from Function.prototype.
This dynamic import expression supposed to load the module and return a promise, when resolved it contains a module object which in turn contains all the exports in this module object.
Example:
modules.js
export function sum(a, b)
{
return a + b;
}
export function subtract(a, b)
{
return a - b;
}
app.js
const modulePath = './modules.js';
import(modulePath)
.then(moduleObject => {
console.log(moduleObject);
})
.catch(error => {
console.log('error loading module');
});
In this example we have two files the first “modules.js” contains some exported helper functions, and the second “app.js” we import these functions using dynamic import, if you checked the console.log() output you will see something like this:
Module {Symbol: 'Module'}
subtract : ƒ subtract(a, b)
sum : ƒ sum(a, b)
Symbol(Symbol): "Module"
....
....
....
As you see it returns a Module object which contains all the exported functions, now let’s use any of these functions like so:
.then(moduleObject => {
console.log(moduleObject);
const sumResult = moduleObject.sum(10, 40);
console.log(`result: ${sumResult}`);
})
// output
result: 50
Another interesting part is to use this dynamic import anywhere in your code, so let’s use it inside a function:
async function calculate(a, b, mode = 'sum')
{
const { subtract, sum } = await import('./modules.js');
if(mode === 'subtract') {
return subtract(a, b);
}
return sum(a, b);
}
const res = await calculate(30, 10, 'subtract').then();
console.log(res);
In this case as the dynamic import return a promise so we can easily use async/await keywords along with it.
What about default export ? the default export also can be used with dynamic imports like so:
modules.js
export default function FooBar() {
console.log('foo bar');
}
app.js
import('./modules.js')
.then(moduleObject => {
console.log(moduleObject.default());
})
As you see the default export can be retrieved under the Module object using the default key, in this example as we are exporting default function so i am invoking it as moduleObject.default() to call the function.
The dynamic export feature can be used in regular scripts or html files using type=”text/javascript” like normal script in contrast with static import which require type=”module”
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dynamic import</title>
</head>
<body>
<script type="text/javascript">
import('./modules.js')
.then(({sum, subtract}) => {
const sumResult = sum(10, 40);
console.log(`result: ${sumResult}`);
});
</script>
</body>
</html>
