A brief discussion on the method of dynamically importing ECMAScript modules

ECMAScript (aka ES2015 or ES) modules are a way to organize cohesive blocks of code in JavaScript.

The ES module system has 2 parts:

• importModule - useimport { func } from './myModule'
• exportmodule - useexport const func = () => {}

importmodule is Modules that import dependencies use theimportsyntax:

import { concat } from './concatModule'; concat('a', 'b'); // => 'ab'

and imported modules export components from themselves using theexportsyntax:

export const concat = (paramA, paramB) => paramA + paramB;

import { concat } from './concatModule'The way to use ES modules is static: it means that the dependencies between modules are already known at compile time.

While static imports work in most cases, sometimes we want to save bandwidth on our clients and load modules conditionally.

To achieve this, we can make a new dynamic import of the module using theimport(pathToModule)syntax in a different way: as a function. Dynamic import is a JavaScript language feature starting fromES2020.

1. Import of dynamic modules

When theimportkeyword is used as a function instead of static import syntax:

const module = await import(pathToModule);

It returns apromiseand starts an asynchronous task that loads the module. If the module is loaded successfully, thenpromisewill resolve to the contents of the module, otherwise,promisewill be rejected.

Please note thatpathToModulecan be any expression whose value is a string representing the path to the imported module. Valid values are ordinary string literals (such as./myModule) or variables with strings.

For example, we load a module in an asynchronous function.

async function loadMyModule() { const myModule = await import('./myModule'); // ... use myModule } loadMyModule();

Interestingly, as opposed to static imports, dynamic imports accept expressions that evaluate to module paths

async function loadMyModule(pathToModule) { const myModule = await import(pathToModule); // ... use myModule } loadMyModule('./myModule');

Now that we understand how to load modules, let’s see how to import them from Extract components from the module.

2. Import components

2.1 Import named components

Consider the following module:

// namedConcat.js export const concat = (paramA, paramB) => paramA + paramB;

Aconcatfunction is exported here.

If you want to dynamically importnamedConcat.jsand access the named exportconcat, then just use destructuring:

async function loadMyModule() { const { concat } = await import('./namedConcat'); concat('b', 'c'); // => 'bc' } loadMyModule();

2.2 Default export

If the module is exported by default, we can use thedefaultattribute to access it.

Still the above example, we export theconcatfunction indefaultConcat.jsby default:

// defaultConcat.js export default (paramA, paramB) => paramA + paramB;

can be used in the dynamic import moduledefaultattribute to access:

async function loadMyModule() { const { default: defaultImport } = await import('./defaultConcat'); defaultImport('b', 'c'); // => 'bc' } loadMyModule();

Note thatdefaultis a keyword in JavaScript, so it cannot be used as a variable name.

2.3 Import mixed form

If there are both default exports and named exports in the module, they are also accessed using destructuring:

async function loadMyModule() { const { default: defaultImport, namedExport1, namedExport2 } = await import('./mixedExportModule'); // ... } loadMyModule();

3. When to use dynamic import

It is recommended to usedynamic importwhen the module is relatively large or the module needs to be imported based on conditions.

async function execBigModule(condition) { if (condition) { const { funcA } = await import('./bigModuleA'); funcA(); } else { const { funcB } = await import('./bigModuleB'); funcB(); } } execBigModule(true);

For small modules (such asnamedConcat.jsordefaultConcat.jsin the previous example), which only have dozens of lines of code, use dynamic import to kill the chicken. Feel it with a knife.

Summary

When callingimport(pathToModule)as a function, its argument represents a module specifier (also called path), then the module will be loaded dynamically.

In this case,module = await import(pathToModule)returns a promise that resolves to an object containing the imported module component.

Node.js (13.2 and above) and most modern browsers support dynamic imports.

English original address: https://dmitripavlutin.com/ecmascript-modules-dynamic-import/

Author: Dmitri Pavlutin

More For programming related knowledge, please visit:programming video! !

The above is the detailed content of A brief discussion on the method of dynamically importing ECMAScript modules. For more information, please follow other related articles on the PHP Chinese website!