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 - use import { func } from './myModule'
• export module - use export const func = () => {}

import module is Modules that import dependencies use the import syntax:

import { concat } from './concatModule';

concat('a', 'b'); // => 'ab'

and imported modules export components from themselves using the export syntax:

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 the import(pathToModule) syntax in a different way: as a function. Dynamic import is a JavaScript language feature starting from ES2020.

1. Import of dynamic modules

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

const module = await import(pathToModule);

It returns a promise and starts an asynchronous task that loads the module. If the module is loaded successfully, then promise will resolve to the contents of the module, otherwise, promise will be rejected.

Please note that pathToModule can 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;

A concat function is exported here.

If you want to dynamically import namedConcat.js and access the named export concat, 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 the default attribute to access it.

Still the above example, we export the concat function in defaultConcat.js by default:

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

can be used in the dynamic import module default attribute to access:

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

loadMyModule();

Note that default is 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 use dynamic import when 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 as namedConcat.js or defaultConcat.js in 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 calling import(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!