7 Examples of JavaScript Dynamic Import ES10
JavaScript 0 CommentsIn this article, we will talk about JavaScript Dynamic Import that introduced in ES10/2019, we will cover basics and different types of examples also we will take a look at static and Dynamic Import in JavaScript. And don’t worry I’m not going to give you a long lecture, we will cover this with small points and examples.
Let’s start, Basically dynamic import is a new function like import statement that introduced in ES10/2019 and it returns a promise. As we know let’s have a look at static import of JavaScript below:
import MyModule from './my-module.js'; import { NamedExport } from './other-module.js';
Now, Let’s have a look at the basic JavaScript dynamic import statement.
#1 Simple Single Line Example
import("module/foo.js").then(foo => console.log(foo.default))
In the above example, we used the single-line statement of Arrow function for console.log
to make it shorter. You can also use the normal function like the below example:-
import('module/foo.js').then(function(foo) { console.log(foo.default); })
#2 Detailed Example
Take a look at the multiline dynamic import example below:-
import('./utils.js') .then((module) => { // here is your default import module.default(); // here you can do whatever you want module.doStuff(); console.log('buginit.com'); });
#3 Conditional Import Example
if ( isSettingComponent ) { import('lodash').then(_ => { // Do something with lodash (a.k.a '_') }); }
In the above example, we import
lodash
library only if there is a setting component.
#4 Using async/await
Because dynamic import()
returns a promise, we can also use async/await instead of the then-based callback style in the example below:
(async () => { const module = await import('./utils.js') // here is your default import module.default(); // here you can do whatever you want module.doStuff(); })();
Note: Although
sourceimport()
looks like a function call, it is specified as syntax that just happens to use parentheses (similar tosuper()
). That means thatimport
doesn’t inherit fromFunction.prototype
so you cannotcall
orapply
it, and things likeconst importAlias = import
don’t work — heck,import
is not even an object! This doesn’t really matter in practice, though.
#5 Separate module Specifier.
I’m sorry but I am gonna call the file path as module specifier, So you can also separate the module specifier using a variable.
const moduleSpecifier = './utils.js'; import(moduleSpecifier) .then((module) => { // here is your default import module.default(); // here you can do whatever you want module.doStuff(); });
#6 Conditional module Specifier.
As we can separate the module specifier, we can also set it conditionally like the example below:-
let moduleSpecifier; if ( isSetting ) { moduleSpecifier = './setting.js'; } else { moduleSpecifier = './utils.js'; } import(moduleSpecifier) .then((module) => { // here is your default import module.default(); // here you can do whatever you want module.doStuff(); });
#7 Catching Error
As JavaScript Dynamic Import returns a promise we can also catch the errors using .catch
method like the example below:
import('module/foo.js') .then(foo => console.log(foo)) .catch(err => console.log(err))
Static import and JavaScript Dynamic Import they both are useful and both have their own use cases. It is recommended that you use static import for the initial dependencies, especially for above-the-fold content and in other cases like loading dependencies on-demand you can use dynamic import statement.
Support
JavaScript Dynamic Import support in Babel, Chrome 63+, Mozilla Firefox 67+ and Safari 11.1+.
That’s all I have got, I hope it was useful, If I have missed anything else please let me know. Share it with love.
