ES6 静态模块结构

参考
在ES6 之前的JavaScript 模块化都是支出动态加载的，也就意味着模块的导入导出可以在运行时动态的变化。ES6 退出自己的一套模块化格式就是为了能够实现静态模块结构。这就意味着在编译时就要确定导入和导出的内容，不允许在运行时发生变化。

动态模块的例子

var my_lib;
if (Math.random()) {
    my_lib = require('foo');
} else {
    my_lib = require('bar');
}

if (Math.random()) {
    exports.baz = ···;
}

静态模块的好处

在 bundling 的时候消除未引用的代码

前端开发一般情况下会是如下情况：

• 在开发阶段，代码会分布在很多文件或模块中，每一个文件都很小
• 在发布阶段，往往会将他们捆绑成几个相对较大的文件

为什么要捆绑？

• 更多的文件意味着更多的更多的请求，在HTTP/2 之前，这不是很友好
• 压缩捆绑后的文件相比未捆绑的文件更高效
• 在捆绑过程中，没有用到的 exports 将会被优化掉，减小项目的体积

更快地找到 imports

静态模块结构下的 imports 就好像是一个变量引用一样，可以在编译的时候就确定，而动态引用在使用时就需要在源模块中进行一番查找。

变量检查

在静态模块结构下，我们可以在知道那些在模块内任何位置都可见的变量，这有助于检查拼写错误，就像很多拼写检查工具所提供的能力一样。

为宏做准备

宏是未来JavaScript发展的方向之一。

为类型做准备

静态类型检查

支持其他语言

如果想要JavaScript支持其他具有宏和静态类型的语言，那么JavaScript模块也就需要是静态结构的。