JavaScript模块化经历从全局变量到ESM的演进，通过CommonJS、AMD、UMD逐步完善，最终ESM成为标准，支持静态分析、依赖优化与动态加载，结合打包工具实现高效工程化管理。
JavaScript 模块化不是一开始就有的，早期的 JS 代码都是直接写在 script 标签里，变量全局暴露，容易产生命名冲突和依赖混乱。随着项目变大，模块化成为工程化的必然选择。理解模块加载原理，有助于写出更清晰、可维护的代码结构。
模块化的发展历程
在没有原生支持模块之前，社区尝试了多种方案来解决依赖管理问题：
- CommonJS：Node.js 使用的标准，通过 require 同步加载模块，module.exports 导出。适合服务端，因为文件都在本地，同步读取没问题。
- AMD（Asynchronous Module Definition）：代表是 RequireJS，浏览器环境使用，支持异步加载，适合网络延迟场景。
- UMD（Universal Module Definition）：兼容 CommonJS 和 AMD 的通用模式，还能回退到全局变量，用于库开发。
- ES Module（ESM）：ECMAScript 2015 正式引入的模块标准，使用 import 和 export，现在已经成为主流。
ES Module 加载机制
ESM 是声明式的静态模块系统，编译时就能确定依赖关系，这为优化和静态分析提供了基础。
- import 必须在顶层作用域，不能动态写在 if 或函数里（但可以使用动态 import()）。
- 模块默认是严格模式，且每个模块有自己的作用域，不会污染全局。
- 模块只会执行一次，再次导入的是同一个实例（单例共享）。
- 浏览器中使用 type="module" 来加载 ESM：
浏览器中的模块解析流程
当浏览器遇到一个模块脚本，会启动以下过程：
立即学习“Java免费学习笔记（深入）”；
DouPHP轻量级外贸商城系统
下载
DouPHP模块化企业网站管理系统是一款轻量级企业网站管理系统，基于PHP+MYSQL架构的，包含“手机版”、“公众号管理模块”、“小程序”，可以使用它快速搭建一个企业网站。 DouPHP功能特色： （模块全部免费，一键安装） 功能性模块：防伪查询模块、投票模块、自定义表单模块、工单模块等、会员模块、订单模块、视频模块、下载模块、图片模块等； 企业官网模块：业务范围
- 下载主模块文件，解析 import 语句。
- 递归下载所有依赖模块，构建模块依赖图（Module Graph）。
- 对整个图进行静态分析，确定执行顺序（拓扑排序）。
- 按顺序实例化并执行模块代码，确保依赖先于使用者执行。
这个过程是异步的，但执行顺序是确定的。比如 A 导入 B，B 就会在 A 之前执行，即使 B 是从网络另一端加载的。
工程化中的模块处理
实际项目中，很少直接让浏览器加载原始模块。现代前端工程化通常借助工具链来优化模块加载：
- 打包工具（Webpack、Vite、Rollup）：将多个模块合并成少量 bundle 文件，减少请求次数，同时支持代码分割（code splitting）实现按需加载。
- 动态 import()：返回 Promise，可用于懒加载路由组件或条件性加载功能模块。
- Tree Shaking：基于 ESM 静态结构，移除未使用的导出代码，减小包体积。
- 路径别名与自动解析：工程化配置中常设置 @/components 这样的别名，提升导入可读性。
基本上就这些。掌握模块加载原理，不只是为了写 import/export，更是为了理解代码如何组织、依赖如何管理、性能如何优化。模块化是工程化的基石，越复杂的项目，越需要清晰的模块设计。
