Module加载的详细说明-保证你有所收获
模块
HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。
<!-- 页面内嵌的脚本 -->
<script type="application/javascript">
// module code
</script>
<!-- 外部脚本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>
上面代码中由于浏览器脚本的默认语言是 JavaScript。
因此type="application/javascript"可以省略。
浏览器同步加载 JavaScript 脚本可能会产生的问题
默认情况下，浏览器是同步加载 JavaScript 脚本.
即渲染引擎遇到<script>标签就会停下来，等JavaScript脚本执行完后，再继续向下渲染。
如果是外部脚本，还必须加入脚本下载的时间。下载完成后，在执行。
如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞。
用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验。
然后就出现了异步加载脚本的两种语法
异步加载脚本的两种语法 defer或async
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
上面代码中，<script>标签打开defer或async属性，脚本就会异步加载。
渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。
defer 与 async的区别是
defer:要等到整个页面在内存中正常渲染结束(DOM 结构完全生成，以及其他脚本执行完成)，才会执行；
async:一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
一句话，defer是“渲染完再执行”，async是“下载完就执行”。
另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
浏览器加载 ES6 模块
浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。
<script type="module" src="./foo.js"></script>
浏览器就知道这是一个es6模块。
浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器。
即等到整个页面渲染完，再执行<script type="module" src="./foo.js"></script>模块脚本
也就是说 type="module" 等价于 defer
如果网页有多个<script type="module">，它们会按照在页面出现的顺序依次执行。
模块引入的注意点
模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL）。
也可以使用export命令输出对外接口。
同一个模块如果加载多次，将只执行一次。
ES6 模块与 CommonJS 模块的差异
1.ommonJS 模块输出的是一个值的拷贝,输出的是值。ES6 模块输出的是值的引用。
2.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
3.CommonJS 模块的require()是同步加载模块。ES6 模块的import命令是异步加载，
详细说下他们的第1个差异
CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值。
模块内部的变化就影响不到这个值。请看下面这个模块文件
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};
上面代码输出内部变量counter和改写这个变量的内部方法incCounter。然后，在main.js里面加载这个模块。
// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter(); //调用
console.log(mod.counter); // 3
上面代码说明，
lib.js模块加载以后，它的内部变化就影响不到输出的值 mod.counter 了。
这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。
// lib.js
var counter = 3;
function incCounter() {
counter++;
}
module.exports = {
get counter() {
return counter
},
incCounter: incCounter,
};
// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter(); //调用
console.log(mod.counter); // 4
ES6 模块的运行机制与 CommonJS 不一样。
JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。
等到脚本真正执行时，再根据这个只读引用到被加载的那个模块里面去取值。
换句话说，ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。
因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
还是举上面的例子。
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
在举一个小粒子
// m1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
// m2.js
import {foo} from './m1.js';
console.log(foo);
setTimeout(() => console.log(foo), 500);
上面代码中，m1.js的变量,foo，在刚加载时等于bar，过了 500 毫秒，又变为等于baz。
Node.js 的模块加载方法
JavaScript 现在有两种模块。一种是 ES6 模块，简称 ESM；另一种是 CommonJS 模块，简称 CJS。
CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。
语法上面，两者最明显的差异是，CommonJS 模块使用require()和module.exports.
ES6 模块使用import和export。
ps:从 Node.js v13.2 版本开始，Node.js 已经默认打开了 ES6 模块支持。
Node.js 要求 ES6 模块采用.mjs后缀文件名。
也就是说，只要脚本文件里面使用import或者export命令，那么就必须采用.mjs后缀名。
Node.js 遇到.mjs文件，就认为它是 ES6 模块，默认启用严格模式，不必在每个模块文件顶部指定"use strict"。
友情提示
注意，ES6 模块与 CommonJS 模块尽量不要混用。require命令不能加载.mjs文件，会报错。
只有import命令才可以加载.mjs文件。反过来.mjs文件里面也不能使用require命令，必须使用import。
简单说一下他们的第2个差异
第二个差异是因为 CommonJS 加载的是一个对象，通过 module.exports 输出。该对象只有在脚本运行完才会生成。
而ES6 模块不是对象，它的对外接口只是一种【静态定义】，在代码静态解析阶段就会生成。
