几种模块打包的区别

392 阅读1分钟

一、CommonJS与ES6 Module的区别

1、静态和动态

(1)CommonJS对模块依赖的解决是动态的,即模块依赖关系的建立发生在代码的运行阶段;
CommonJS是运行时加载
(2)ES6 Module对依赖的解决是静态的,对模块依赖关系的建立发生在代码的编译阶段;
我们会在当前模块最开始的位置,基于import把所有依赖模块导入进来
   优势:
     + 死代码的检测和排除
     + 模块变量的类型检查
     + 可以通过命名导出直接导出变量,减少引用层级,程序的效率更高

2、值拷贝和值引用

1)导入一个模块的时候,对于CommonJS来说获取的是一份导出值的拷贝;
我们可以直接更改导入进来的模块中的某个变量的值,并不会影响模块中对应的变量的值;
我们通过函数更改模块中的数据的时候,并不会影响我们当前的模块中的值;
(2)ES6 Module,输出的是值的引用,当我们通过函数更改模块里面的值的时候,也会实时的反应在我们当前的
模块里面;
我们不能直接修改导入进来的某个变量的值;

ES6Module和CommonJS具备相同的机制:避免重复导入;再次引入直接把上一次导入拷贝的结果复制一份过来即可

二、AMD和CMS区别

1、AMD推崇依赖前置,CMD推崇就近依赖
2、执行时机不同:AMD是加载完立即执行,CMD是延迟执行(二者的最大区别)