8

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

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

也许我错过或误解了这个新架构的一些东西？

非常感谢你！

问候。

4

2 回答 2

9

现在这是标准化的，所有主要的现代浏览器都支持。

模块会被异步加载吗？

是的，有两种选择；详情如下。

仅引用我的主文件或入口文件和浏览器将延迟加载所需模块。

不是那么“懒惰”，但是是的。

启用它

此处和此处（可能还有其他地方）的规范中的详细信息。

要获得此行为，您可以使用以下命令指定您的脚本是一个模块type="module"：

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

或用于内联脚本

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

这意味着脚本是根据 JavaScript 规范中的模块定义而不是脚本定义来解析和处理的，这意味着它可以具有导入（和导出）。

导入是相对于script的 URL（对于通过单独的资源加载的模块，如main.js上述，就像 CSS）或相对于文档（对于如上述的内联模块）进行解析。

例如，如果我在我的文档中有这个http://example.com/index.html：

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

...并nifty.js包含

import Thingy from "./thingy.js";

...然后浏览器寻找http://example.com/handy/stuff/thingy.js，而不是http://example.com/thingy.js。同样，就像 CSS 导入一样。

请注意，./on 该模块说明符是必需的，只是from "thingy.js"不起作用。这是因为不允许使用裸说明符，因为它们最终可能具有特殊含义。（例如，在 Node.js 中，这是您指定内置模块和安装在node_modules. 中的模块的方式。）模块说明符必须是完整的 URL，或以 、 或 开头的/相对./URL ../。

异步

我上面说过模块是异步加载的，有两个选项可用。规范中的这张图说得最好（有关最新副本，请参阅规范）：

在此处输入图像描述

如您所见，对于type="module"脚本，如果您没有在script标签上放置任何特殊的标志属性，则所有模块的依赖关系都将被解析，然后脚本将在 HTML 解析完成后运行。如果包含该async属性，它可能会在 HTML 解析完成之前更快地运行（例如，如果所有脚本都在缓存中）。（defer对模块无效。）

于 2016-12-01T10:24:10.780 回答
1

根据Mozilla网站上的这篇文章，这取决于实施：

因为系统没有指定加载是如何工作的，而且你可以通过查看源代码中的导入声明提前找出所有的依赖关系，所以 ES6 的实现可以在编译时自由地完成所有工作并打包您所有的模块都放在一个文件中，以便通过网络发送它们！

这在未来可能会改变，因为它还没有完全标准化，但您可以确定您不需要为每个模块添加脚本标签。今天的一些模块加载器会为您捆绑所有文件，但未来可能不会出现这种情况，因为它在 HTTP2 的性能方面没有优势。

你可以阅读import 这里的 ES6 规范。

于 2016-04-09T21:57:05.380 回答