7 Examples of JavaScript Dynamic Import ES10

In 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 import()looks like a function call, it is specified as syntax that just happens to use parentheses (similar to super()). That means that import doesn’t inherit from Function.prototype so you cannot call or apply it, and things like const importAlias = import don’t work — heck, import is not even an object! This doesn’t really matter in practice, though.

source

#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.