ES6 Module 静态的,不能放在块级作用域内,代码发生在编译时。 ES6 Module 的值是动态绑定的,可以通过导出方法修改,可以直接访问修改结果。 ES6 Module 可以导出多个属性和方法,可以单个导入导出,混合导入导出。 ES6 模块提前加载并执行模块文件,
ES6 module 的引入和导出是静态的,import 会自动提升到代码的顶层 ,import , export 不能放在块级作用域或条件语句中。
ES6 module 和 Common.js 一样,对于相同的 js 文件,会保存静态属性。 但是与 Common.js 不同的是 ,CommonJS 模块同步加载并执行模块文件,ES6 模块提前加载并执行模块文件,ES6 模块在预处理阶段分析模块依赖,在执行阶段执行模块,两个阶段都采用深度优先遍历,执行顺序是子 -> 父。 如:
main.jsconsole.log('main.js开始执行')import say from './a'import say1 from './b'console.log('main.js执行完毕')a.jsimport b from './b'console.log('a模块加载')export default function say (){console.log('hello , world')}b.jsconsole.log('b模块加载')export default function sayhello(){console.log('hello,world')}main.js 和 a.js 都引用了 b.js 模块,但是 b 模块也只加载了一次。执行顺序是子 -> 父b模块加载a模块加载main.js开始执行main.js执行完毕
不能修改import导入的属性 使用 import 被导入的变量是只读的,可以理解默认为 const 装饰,无法被赋值 使用 import 被导入的变量是与原变量绑定/引用的,可以理解为 import 导入的变量无论是否为基本类型都是引用传递。
import() 返回一个 Promise 对象, 返回的 Promise 的 then 成功回调中,可以获取模块的加载成功信息
首先 import() 动态加载一些内容,可以放在条件语句或者函数执行上下文中
import() 这种加载效果,可以很轻松的实现代码分割。避免一次性加载大量 js 文件
ES6导入 Tree Shaking 在 Webpack 中的实现,是用来尽可能的删除没有被使用过的代码,一些被 import 了但其实没有被使用的代码,就不会被打包