JavaScript模块 commonJS、AMD、UMD、ES6

模块化
早期，立即调用函数闭包、类、对象实现
Node有自己的模块系统
ES6,JavaScript依托import、export的静态模块系统（不能实现模块的按需加载）
虽然浏览器很早就支持动态导入，但是直到ES2020，JavaScript才新增对动态模块支持

静态模块：各个模块之间的依赖关系图所涉及的所有imports和exports都是在执行之前即编译的时候resolve。事实上也有lazy loading或按需加载，即在运行时才进行模块加载。

打包时候需要关注你代码包中所包含的代码，以避免因体积过大而导致加载时间过长。
在前期就思考该问题并对代码包进行代码分割，这是诸如 Webpack，Rollup 和 Browserify（factor-bundle）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。
这能“懒加载”当前用户所需要的内容，显著地提高你的应用性能。
尽管并没有减少应用整体的代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。
在你的应用中引入代码分割的最佳方式是通过动态 import() 语法，当 Webpack 解析到该语法时，会自动进行代码分割。
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。可以通过entry配置、import动态加载实现

浏览器逐渐支持模块化，尽管线上部署还依赖打包工具，但是打包工具已经不是必须品
模块化已经得到浏览器的普遍支持，但是开发者仍倾向于用代码打包工具，首次访问网站时候，相比加载多个小型模块，加载一个代码包用户体验更佳

---

模块化的核心是管理依赖，在浏览器中加载模块涉及执行其中的代码，但必须要直到所有的模块代码及其依赖都加载完全才开始执行入口模块，如果没有，需要发送请求并等待网络返回。
动态依赖：有的模块系统要求开发者在模块开始列出所有依赖，而有些模块系统允许开发者在程序结构中动态添加依赖。动态依赖可以支持更复杂的依赖关系，但是代价是增加了对模块进行静态分析的难度。

静态分析：模块发送到浏览器会被静态分析，分析工具会检查代码结构并在不执行代码的情况下推断其行为对静态分析友好的模块系统可以让模块打包系统更容易将代码处理为更少的文件。

if(condition){
   
	require('./moduleA');
}

循环依赖
要构建一个没有循环依赖的JavaScript应用几乎不可能。在包含循环依赖的应用程序，模块加载顺序可能会出人意料，不过只要恰当地封装模块，使它们没有副作用，加载顺序就应该不会影响应用程序的运行。

模块

一开始通过命名空间组织代码，例如jQuery库将其API都放在window.$
命名空间冲突
无法合理管理项目的依赖和版本
无法方便控制依赖的加载顺序

托管类定义
ECMAScript6模块规范
JavaScript是异步加载的解释性语言，所以不同模块实现也表现出不同形态

有些模块要求开发者在开始列出所有依赖，而有些依赖却允许动态加载依赖。动态依赖支持更复杂的依赖关系，但是增加了浏