How the browser will handle ES6 import / export syntax

Question

I pondered this question for many days, and I decided to ask the experts.

How will the browser handle the new import / export syntax? I mean: will the modules load asynchronously? By referencing only my main or login file, browsers will be too lazy to load requiere modules.

Perhaps I missed something or did not understand something about this new architecture?

Thank you very much!

Sincerely.

Answer 1

Now it is standardized and supported by all major modern browsers.

will the modules be loaded asynchronously?

Yes, with two options available; details below.

Link only to my main or input file and browsers will lazily load the necessary modules.

Not very lazy, but yes.

Inclusion of this

Details are in the specification here and here (and possibly elsewhere).

To get this behavior, you indicate that your script is a module using type="module" :

 <script src="main.js" type="module"></script> 

or for embedded scripts

 <script type="module"> // ...module code here </script> 

This means that the script is parsed and processed according to the definition module in the JavaScript specification instead of according to the definition script , which means that it can have import (and export).

Import is allowed relative to the script URL (for modules loaded via a separate resource, such as main.js above, as well as CSS) or relative to the document (for built-in modules such as the one above).

For example, if I have this in my document at http://example.com/index.html :

 <script src="./handy/stuff/nifty.js" type="module"></script> 

... and nifty.js contains

 import Thingy from "./thingy.js"; 

... then the browser is looking for http://example.com/handy/stuff/thingy.js , not http://example.com/thingy.js . Again, the same as importing CSS.

Note that ./ required for this module specifier, just from "thingy.js" will not work. This is because bare specifiers are forbidden, because they are likely to be of particular importance. (For example, in Node.js, as you specify the built-in modules and modules installed in node_modules .) node_modules module node_modules must be a full URL or a relative URL starting with / , ./ or ../ .

asynchronous

I said above that modules load asynchronously, and there are two options. This image from the spec says it is the best (see Spec for its latest copy):

As you can see, for type="module" scripts, if you do not put any special flag attributes in the script tag, all module dependencies will be resolved, and then the script will be run after completion of the HTML analysis. If you async attribute, it may start earlier, before HTML analysis is complete (for example, if all scripts are in the cache). ( defer not valid for modules.)

Answer 2

According to this publication on the Mozilla website, this is before implementation:

Since the system does not determine how the download works, and because you can find out all the dependencies ahead of time by looking at the import declarations in the source code, the ES6 implementation can do all the work at compile time and merge all your modules into one file to send them over the network !

This may change in the future as it is still not fully standardized, but you can be sure that you do not need to add a script tag for each module. Some module loaders today link all the files for you, but this may not be the case when the future lives, as it will not have a performance advantage in HTTP2.

You can read the ES6 import specification here .