模块化开发

模块化开发指的是，在前端开发过程中，每个模块都是独立的单元，我们通过封装变量（如ESM的独立作用域），避免全局暴露，从而实现变量隔离避免全局污染。这样在代码修改时，可以更好的控制影响范围，且提高了复用性。

当前已有的实现包括 CommonJS，AMD，CMD，UMD，ESM

1. CommonJS 是同步加载的（适合服务器启动时做预处理），在 Node 环境下使用
2. AMD 异步加载（避免浏览器阻塞），提供给老旧浏览器
3. CMD 异步加载，提供给浏览器使用，已逐步淘汰
4. UMD 在Node 同步加载，浏览器环境异步加载，用于兼容旧环境
5. ESM 是官方模块化规范，在Node 同步加载，浏览器环境异步加载，且支持静态优化

如何使用？ 当前情况下，我们使用的都是 ESM，通过 import 导入模块，export 导出模块

解决什么问题？

1. 模块化开发可以解决代码之间变量名，函数名的冲突 / 污染的情况，降低代码之间的耦合关系，提高代码复用性、可维护性。
2. 模块化让团队开发者能并行开发独立模块（通过 npm 包管理），通过接口约定减少冲突。此外可以显著提升单元测试和自动化部署效率（仅测试/部署修改的部分，提高效率，降低风险）。

最佳实践

1. 模块设计时遵循单一职责（比如拆分 UI 组件和数据组件），高内聚低耦合（模块内部功能紧密相关，模块间通过接口通信），开放封闭，依赖倒置的设计原则
2. ESM 的 import/export 使得 webpack 等工具在编译时可以分析依赖关系（CommonJS 的 require 在运行时加载，难以静态分析），从而进行 Tree Shaking，将未使用的代码提前移除，只引入需要的代码，减少代码体积。
3. 通过代码分割，动态import()将路由页面拆分为独立块，可以实现更好的按需加载。
4. 在分布式架构中的应用：在微前端中，将应用拆分为独立的子应用，实现独立的开发和部署