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

module会被异步加载吗？

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

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

没有那么多“懒惰”，但是是的。

启用它

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

要获得这种行为，可以指定自己的脚本是一个module使用type="module"：

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

或内联脚本

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

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

导入是相对于脚本的 URL解析的（对于通过单独的资源加载的module，如main.js上述，就像 CSS）或相对于文档（对于像上面那样的内联module）。

例如，如果我的文档中有这个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 导入一样。

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

异步

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

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

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

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

这在未来可能会改变，因为它仍然没有完全标准化，但您可以确定不需要为每个module添加脚本标记。今天的一些module加载器为你打包了所有文件，但未来可能不会出现这种情况，因为它在 HTTP2 中不会有性能优势。

您可以阅读import 此处的 ES6 规范。