JavaScript modules - dynamic imports and side effects

Question

Can anyone tell me precisely what is meant by the following, from MDN docs for import() (emphasis mine):

The following are some reasons why you might need to use dynamic import: ... When the module being imported has side effects, and you do not want those side effects unless some condition is true.

I fail to see how dynamic imports have any bearing on side effects. The quote suggests dynamic imports somehow mitigate or can avoid side effects, which isn't (to my knowledge) true. Yes they mean we can conditionally import, but importing still means side effects.

That is, if I do:

//module.js
let foo = 'bar';
alert('Unwanted side effect!');
export {foo};

//...

//mainscript.js
import('./module.js').then(obj => { });

...I still get the alert.

Am I misconstruing the above somehow?

Answer 1

I may also be misunderstanding, but my take is that you can import stuff conditionally:

//mainscript.js
if(somethingIsTrue){
    import('./module.js').then(obj => { });
}

So if there are side-effects in the module, you'll only get them in the case that the module is actually used. In the static case, the module always gets imported and you always get the side effects.