浏览器如何处理ES6导入/导出语法 [英] How will browsers handle ES6 import/export syntax

问题描述

我一直在想这个问题很多天，我决定问专家。

浏览器将如何处理新的导入/导出语法？我的意思是：模块将被异步加载吗？仅引用我的主要或入门文件和浏览器将延迟加载请求模块。

也许我错过或误解了有关这种新架构的东西？

非常感谢！

请问。

解决方案

这是

如您所见，对于 type =module脚本，如果您没有在脚本标签，所有模块的依赖项都将被解析，然后在完成HTML解析后，脚本将被运行。如果您包含 async 属性，则可能会在HTML解析完成之前运行（例如，如果所有脚本都在缓存中）。 （ defer 对模块无效。）

I've been thinking around this question lot of days and i have decided to ask the experts.

How browsers will handle the new import/export syntax ? I mean: will the modules be loaded asynchronously ? Referencing only my main or entry file and browsers will lazy load the requiere modules.

Maybe am i missing or misunderstanding something about this new architecture ?

Thank you very much!

Regards.

解决方案

This is standardized now and vendors are actively seeking to implement it (for instance, here's the issue for Chromium).

will the modules be loaded asynchronously?

Yes, with two options available; details below.

Referencing only my main or entry file and browsers will lazy load the requiere modules.

Not so much "lazy," but yes.

Enabling it (when it's available)

(As far as I know, there is no browser currently shipping with modules support. The is based on the spec linked above.)

To get this behavior (when it's available), you'll specify that your script (even your main one) is a module by using type="module":

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

or for inline scripts

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

That means that the script will be parsed and handled per the Module definition in the JavaScript specification instead of per the Script definition, which means it can have imports (and exports).

Imports are resolved relative to the script's URL (for modules loaded via a separate resource such as the main.js above) or relative to the document (for inline modules like the one above).

So for instance, if I have this in my document at http://farsightsoftware.com/index.html:

<script src="http://example.com/cdn/nifty.js" type="module"></script>

...and nifty.js contains

import Thingy from "./thingy.js";

...then the browser looks for http://example.com/cdn/thingy.js, not http://farsightsoftware.com/thingy.js (rather like imports in CSS work).

Async

I said above that modules are loaded asynchronously, and there are two options available. This graphic from the spec says it best (see the spec for the latest copy of it):

As you can see, for type="module" scripts, if you don't put any special flag attributes on the script tag, all of the module's dependencies will be resolved and then the script will be run once parsing of the HTML is complete. If you include the async attribute, it may run sooner, before the HTML parsing is complete (for instance, if all the scripts are in cache). (defer is not valid for modules.)

这篇关于浏览器如何处理ES6导入/导出语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！