29、JavaScript 模块与标准库详解

JavaScript 模块与标准库详解

1. ES6 模块在 Web 中的应用

在 Web 应用开发中，频繁更新且用户频繁回访的 Web 应用，使用小模块而非大捆绑包可能会带来更好的平均加载时间，这是因为能更好地利用用户浏览器缓存。

1.1 使用 <script type="module">

若要在 Web 浏览器中使用 import 指令，需使用 <script type="module"> 标签告知浏览器代码为模块。示例如下：

<script type="module">import "./main.js";</script>

此标签标记了模块化程序的起点，其导入的模块会按需作为常规 JavaScript 文件加载，并以严格模式作为常规 ES6 模块执行。

1.2 模块加载与执行顺序

带有 type="module" 属性的脚本，加载和执行方式与带有 defer 属性的脚本类似。HTML 解析器遇到 <script> 标签时开始加载代码（对于模块，此步骤可能是递归加载多个 JavaScript 文件的过程），但代码执行要等 HTML 解析完成。HTML 解析完成后，脚本（包括模块化和非模块化）按在 HTML 文档中出现的顺序执行。

可使用 async