ES6 最大的一个改进就是引入了模块规范。这个规范全方位简化了之前出现的模块加载器,原生浏
览器支持意味着加载器及其他预处理都不再必要。从很多方面看,ES6 模块系统是集AMD 和CommonJS
之大成者。
模块标签及定义
ECMAScript 6 模块是作为一整块JavaScript 代码而存在的。带有type="module"属性的
即使与常规JavaScript 文件处理方式不同,JavaScript 模块文件也没有专门的内容类型。
与传统脚本不同,所有模块都会像
另外,可以改为加载外部JS 模块定义:
嵌入的模块定义代码不能使用import 加载到其他模块。只有通过外部文件加载的模块才可以使用
import 加载。因此,嵌入模块只适合作为入口模块。
模块加载
ECMAScript 6 模块的独特之处在于,既可以通过浏览器原生加载,也可以与第三方加载器和构建工
具一起加载。有些浏览器还没有原生支持ES6 模块,因此可能还需要第三方工具。事实上,很多时候使
用第三方工具可能会更方便。
完全支持ECMAScript 6 模块的浏览器可以从顶级模块加载整个依赖图,且是异步完成的。浏览器
会解析入口模块,确定依赖,并发送对依赖模块的请求。这些文件通过网络返回后,浏览器就会解析它
们的内容,确定它们的依赖,如果这些二级依赖还没有加载,则会发送更多请求。这个异步递归加载过
程会持续到整个应用程序的依赖图都解析完成。解析完依赖图,应用程序就可以正式加载模块了。
这个过程与AMD 风格的模块加载非常相似。模块文件按需加载,且后续模块的请求会因为每个依
赖模块的网络延迟而同步延迟。即,如果moduleA 依赖moduleB,moduleB 依赖moduleC。浏览器在
对moduleB 的请求完成之前并不知道要请求moduleC。这种加载方式效率很高,也不需要外部工具,
但加载大型应用程序的深度依赖图可能要花费很长时间。v