浏览器将如何处理 ES6 import/export 语法
How will browsers handle ES6 import/export syntax
这个问题我想了很多天，决定请教专家。
浏览器将如何处理新的 import/export 语法？我的意思是：模块会被异步加载吗？仅引用我的主文件或入口文件，浏览器将延迟加载 requiere 模块。
也许我对这个新架构有什么遗漏或误解？
非常感谢！
此致。
根据 Mozilla 网站上的 this post，这取决于实现：
Because the system doesn’t specify how loading works, and because you can figure out all the dependencies ahead of time by looking at the import declarations in the source code, an implementation of ES6 is free to do all the work at compile time and bundle all your modules into a single file to ship them over the network!
这在未来可能会改变，因为它还没有完全标准化，但你可以肯定，你不需要为每个模块添加脚本标签。
今天有些模块加载器会为您捆绑所有文件，但未来可能不会是这种情况，因为它在 HTTP2 中不会有性能优势。
你可以阅读importhere的ES6规范。
这是 standardized now 并且受到所有主要现代浏览器的支持。
will the modules be loaded asynchronously?
是的，有两个选项；详情如下。
Referencing only my main or entry file and browsers will lazy load the requiere modules.
没那么多"lazy,"但是有。
启用它
规范中的详细信息 here and here（可能还有其他地方）。
要获得此行为，您可以使用 type="module":
指定您的脚本是 模块
<script src="main.js" type="module"></script>
或内联脚本
<script type="module">
// ...module code here
</script>
这意味着根据 Module definition in the JavaScript specification instead of per the 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 导入一样。
请注意，该模块说明符上的 ./ 是必需的，只是 from "thingy.js" 不起作用。那是因为不允许使用裸说明符，因为它们可能最终具有特殊含义。 （例如，在 Node.js 中，这就是您指定内置模块和安装在 node_modules 中的模块的方式。）模块说明符必须是完整的 URL 或相对的 URL 以 /、./ 或 ../.
开头
异步
上面说了模块是异步加载的，有两种选择。规范中的这张图片说得最好（请参阅规范以获取最新副本）：
如您所见，对于 type="module" 脚本，如果您不在 script 标记上放置任何特殊标志属性，那么所有模块的依赖项都将被解析，然后脚本将运行 一旦 HTML 的解析完成。如果包含 async 属性，它可能会 运行 更快，在 HTML 解析完成之前（例如，如果所有脚本都在缓存中）。 （defer 对模块无效。）
这个问题我想了很多天，决定请教专家。
浏览器将如何处理新的 import/export 语法？我的意思是：模块会被异步加载吗？仅引用我的主文件或入口文件，浏览器将延迟加载 requiere 模块。
也许我对这个新架构有什么遗漏或误解？
非常感谢！
此致。
根据 Mozilla 网站上的 this post，这取决于实现：
Because the system doesn’t specify how loading works, and because you can figure out all the dependencies ahead of time by looking at the import declarations in the source code, an implementation of ES6 is free to do all the work at compile time and bundle all your modules into a single file to ship them over the network!
这在未来可能会改变，因为它还没有完全标准化，但你可以肯定，你不需要为每个模块添加脚本标签。 今天有些模块加载器会为您捆绑所有文件，但未来可能不会是这种情况，因为它在 HTTP2 中不会有性能优势。
你可以阅读importhere的ES6规范。
这是 standardized now 并且受到所有主要现代浏览器的支持。
will the modules be loaded asynchronously?
是的，有两个选项；详情如下。
Referencing only my main or entry file and browsers will lazy load the requiere modules.
没那么多"lazy,"但是有。
启用它
规范中的详细信息 here and here（可能还有其他地方）。
要获得此行为，您可以使用 type="module":
<script src="main.js" type="module"></script>
或内联脚本
<script type="module">
// ...module code here
</script>
这意味着根据 Module definition in the JavaScript specification instead of per the 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 导入一样。
请注意，该模块说明符上的 ./ 是必需的，只是 from "thingy.js" 不起作用。那是因为不允许使用裸说明符，因为它们可能最终具有特殊含义。 （例如，在 Node.js 中，这就是您指定内置模块和安装在 node_modules 中的模块的方式。）模块说明符必须是完整的 URL 或相对的 URL 以 /、./ 或 ../.
异步
上面说了模块是异步加载的，有两种选择。规范中的这张图片说得最好（请参阅规范以获取最新副本）：
如您所见，对于 type="module" 脚本，如果您不在 script 标记上放置任何特殊标志属性，那么所有模块的依赖项都将被解析，然后脚本将运行 一旦 HTML 的解析完成。如果包含 async 属性，它可能会 运行 更快，在 HTML 解析完成之前（例如，如果所有脚本都在缓存中）。 （defer 对模块无效。）