ecmascript-modules-dynamic-import/

[utterances-bot]

How to Dynamically Import ECMAScript Modules

How to use import(pathToModule) to dynamically import ECMAScript modules in JavaScript.

https://dmitripavlutin.com/ecmascript-modules-dynamic-import/

[marcodca]

Just wanna say that you content is truly amazing. In times when we seem are getting bloated with "This 10 JS tricks will save you 12 hs every week" kind of things, your content shines for its quality, originality and usefulness.

[panzerdp]

Just wanna say that you content is truly amazing. In times when we seem are getting bloated with "This 10 JS tricks will save you 12 hs every week" kind of things, your content shines for its quality, originality and usefulness.

Thanks @marcodca!

[aditya-padhi-kbl]

Hi, thank-you for this wonderful article.
I have one doubt, in the example

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

execBigModule(true);

if I call execBigModule(true) 3 times will it load the modules 3 times ? In case of static imports it loads only once.

[panzerdp]

if I call execBigModule(true) 3 times will it load the modules 3 times ? In case of static imports it loads only once.

During the first call, './bigModuleA' is going to be loaded. On later calls, since the module code is loaded already, it's doing to resolve right away with the loaded code.

[pawelgrzybek]

Great article as always Dmitri.

One tiny little thing that I noticed is the fact that you use file paths without extension which I believe works using popular bundles like Webpack or Parcel but it is not aligned with the ECMAScript documentation. Maybe it is worth to align code examples with the spec just not to confuse future readers.

Thanks a ton!

[panzerdp]

but it is not aligned with the ECMAScript documentation

Thanks @pawelgrzybek!

As far as I know the specification doesn't put any restriction on the value of the specifier: it can be any string value as long as the concrete engine implementation accepts it.

Either way, I will add the file extensions to paths — it is less confusing.

[SiarheiBobryk]

Thanks for sharing!

[panzerdp]

Thanks for sharing!

You're welcome @SiarheiBobryk!

[hikariNTU]

Nice article which explains some of my concerns about dynamic import.

But what about mixing static import with dynamic import? Considering following code:

import Foo from './foo.js';

// do something with foo.js dependencies

async () => {
  const NewFoo = await import('./foo.js');
}

// Foo ~= NewFoo ?

Will the ./foo.js been re-evaluated upon await or it will retrieve the component from static imported one?

[panzerdp]

But what about mixing static import with dynamic import?

@hikariNTU Most likely it evaluates to the same module instance.

Can you create a codesanbox and see if it's true? Feel free to share your code.

[padcom]

Great article! This should be everything in the world you would ever need to properly implement the microfrontends architecture!

[panzerdp]

Great article! This should be everything in the world you would ever need to properly implement the microfrontends architecture!

@padcom At least for me a significant challenge is to configure Webpack. :)

[fatso83]

You might want to add a section on possible pitfalls of dynamic imports. I had to learn much more than I wanted about the EcmaScript and HTML specification when it comes to dynamic imports after seeing it fail. Specifically, Chrome will cache a failed module resolution for FOREVER, no matter how many times you reload (you need to clear the cache).

This article by Alon Mizrahi goes into what happens and has a reasonable workaround using cache busting: https://medium.com/@alonmiz1234/retry-dynamic-imports-with-react-lazy-c7755a7d557a

I am working on "weaponizing" that approach so that it works across browsers and makes use of a cache to improve the performance.

EDIT: Made the library: https://github.com/fatso83/retry-dynamic-import

[panzerdp]

@fatso83 Thanks for pointing this out. I will think about improving the post.

[jowe81]

Thanks for your great article!

[panzerdp]

@jowe81 You're welcome!