06. Dynamic Import
By default ES modules completely static:
all imports should be resolved at compile time;
import declaration can only appear at the top level of a module;
module specifier in import expression if fixed and can not contain variables and expressions.
Dynamic import proposal adds to JS a dynamic import operator:
The parameter is a string with a module specifier.
Can be any expression whose result can be coerced to a string.
The result of the import operator is a Promise.
Once the module is completely loaded, the Promise is fulfilled with it.
Features:
The operator is used like a function (but actually
import()
is an operator).If
import()
is used in a module, it can occur anywhere at any level, and is not hoisted.import()
can be used from scripts, not just from modules.import()
accepts arbitrary strings, not just static string literals.The presence of
import()
in the module does not establish a dependency which must be fetched and evaluated before the containing module is evaluated.import()
does not establish a dependency which can be statically analysed.import()
follows the ES modules rules: singleton, specifiers, CORS etc.The order of used
import()
in the code doesn’t have anything in common with the order they are resolved.The dynamic import executes a script as a module, providing its own context which is different from the global.
import()
specifier is always related to the file it's called.
Conditional loading of modules:
Use anywhere in the code:
Use variables to construct module declaration:
Loading modules on demand:
Features:
you can use dynamic import for lazy or conditional loading and in user-depending action
dynamic
import()
can be used anywhere in your scriptsimport()
takes string literals and you can construct the specifier depending on your needs
Use Promises patterns to load modules:
You can dynamically load multiple modules at the same time via Promise.all()
:
Async functions and import()
import()
Dynamically load module using async/await
:
References:
Last updated
Was this helpful?