Introduction

Some older browsers don’t support ECMAScript modules or dynamic import, which are fundamental to code splitting and lazy loading. Despite the decline in usage of these browsers, some developers still have to support them. While it is possible to polyfill ECMAScript modules in these browsers to a large extent, doing so can incur performance overhead. In cases where performance and compatibility are paramount, a custom custom format like AMD or proprietary loader like Webpack’s runtime can be used.

The Test

This test bundles three JavaScript modules: an entry module with a dependency, and a dynamically imported module that will be code-splitted. Each build tool is configured to use either its built-in custom module format or the most popular custom module format for that tool.

index.js

import { logCaps } from './utils.js';

async function main() {
  const { exclaim } = await import('./exclaim.js');
  logCaps(exclaim('This is index'));
}
main();

utils.js

export function logCaps(msg) {
  console.log(msg.toUpperCase());
}

exclaim.js

export function exclaim(msg) {
  return msg + '!';
}

The result should be two bundles: an entry bundle containing the code from index.js and utils.js, and another containing exclaim.js. The second bundle should be dynamically loaded by the custom module format's runtime implementation when main() is called.