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

问题描述

这个问题我想了很多天，我决定问问专家.

浏览器将如何处理新的导入/导出语法?我的意思是:模块会被异步加载吗?仅引用我的主文件或入口文件和浏览器将延迟加载所需模块.

也许我对这个新架构有遗漏或误解?

非常感谢！

问候.

解决方案

这是

如您所见，对于 type="module" 脚本，如果您没有在 script 标签上放置任何特殊标志属性，则模块的所有依赖项将被解析，然后脚本将在 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 supported by all major modern browsers.

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

Details in the spec here and here (and possibly elsewhere).

To get this behavior, you specify that your script 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 is 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, just like CSS) or relative to the document (for inline modules like the one above).

So for instance, 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 looks for http://example.com/handy/stuff/thingy.js, not http://example.com/thingy.js. Again, just like CSS imports.

Note that the ./ on that module specifier is required, just from "thingy.js" won't work. That's because bare specifiers are disallowed because they'll probably end up having a special meaning. (For instance, in Node.js, that's how you specify built-in modules, and modules installed in node_modules.) A module specifier must be a full URL, or a relative URL starting with /, ./, or ../.

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屋！