nomodule and "type="module" works differently for IE 11

user_12910455 0
Viewed 2652

I was testing the functionality of nomodule and type="module" in an app. I used chrome which only downloaded the file in type="module" tag, which was expected. But when I tested it in IE 11, to my amusement files where downloaded from both the script tags.

I have attached the images for reference. Please help me understand this behaviour.

index.html

<meta charset="utf-8">
<title>custom-element demo</title>
<script src="https://unpkg.com/vue"></script>
<script nomodule src="http://localhost:85/email-compose-legacy.min.js"></script>
<script type="module" src="http://localhost:85/email-compose.min.js"></script>

<email-compose-legacy></email-compose-legacy>

network tab in chrome

network tab in IE 11

internet-explorer-11 vue.js javascript
1 Answers

I think that's due to the different JS engines used in different browsers.

From this article, we can see that the nomodule and type="module" attributes only ensure if the scripts will be excuted but can't ensure if they will be downloaded:

nomodule

This Boolean attribute is set to indicate that the script should not be executed in browsers that support ES2015 modules.

module: Causes the code to be treated as a JavaScript module.

So we only need to ensure the type="module" script won't be excuted in IE and the nomodule script will be excuted in IE which is the opposite in Chrome.

Return to the JS engine, Chrome uses V8 as the JS engine and IE and Edge Legacy use Chakra as the JS engine. You'll find that the scripts will also be both downloaded in Edge Legacy. So I think that's the different JS engines lead to the different behaviors.

user_114903470
Related