Mastering ES Modules: Static & Dynamic Imports in JavaScript

ES module system has two roles: import and export.

Import – import { func } from './myModule.js' Export – export const func = () => {}; Static imports use the import syntax and are resolved at compile time.

// The importing module
import { concat } from './concatModule.js';

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

The imported module itself exports its components:

// The imported module exports components
export const concat = (paramA, paramB) => paramA + paramB;

Static imports are sufficient for most cases, but dynamic loading is possible when import is used as a function.

1. Dynamic Module Import

When import is called as a function, it returns a Promise that resolves to the module object.

const module = await import(path);

Valid path expressions include string literals, variables, and function calls:

// Classic string literals
const module1 = await import('./myModule.js');

// A variable
const path = './myOtherModule.js';
const module2 = await import(path);

// Function call
const getPath = (version) => `./myModule/versions/${version}.js`;
const moduleVersion1 = await import(getPath('v1.0'));
const moduleVersion2 = await import(getPath('v2.0'));

Because import(path) returns a Promise, it works naturally with async/await:

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

loadMyModule();

2. Importing Components

2.1 Named Export Import

Consider a module namedConcat.js that exports a named function:

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

To dynamically import and use the named export:

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

loadMyModule();

2.2 Default Export Import

If a module uses a default export, access it via the default property of the module object.

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

Because default is a reserved word, use an alias when destructuring:

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

loadMyModule();

2.3 Mixed Export Import

When a module exports both a default and named exports, you can destructure them together:

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

loadMyModule();

3. When to Use Dynamic Import

Dynamic import is useful for loading large modules conditionally:

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

execBigModule(true);

For small modules with only a few lines of code, static import is usually simpler.

4. Conclusion

Dynamic import is supported in Node.js (v13.2 and later) and most modern browsers.