一文带你了解，前端模块化那些事儿 _前端

文章插图

前端模块化省流：ChatGPT总结

该文章主要讲述了前端模块化的发展历史和各个阶段的技术方案，包括无模块化（IIFE）、CommonJS、AMD、CMD、ESModule、UMD 。
其中，无模块化时期的文件拆分是最基础的模块化，但也存在函数命名冲突的问题；
IIFE 是现代模块化的基石，利用函数的块级作用域进行隔离，可以控制作用域；
CommonJS 文件即模块，模块加载同步，适用于服务器端 node，浏览器端使用 webpack 或 browserfy 。
【一文带你了解，前端模块化那些事儿】最后，各种模块化技术方案都是为了更好地满足前端代码管理、组织、通信的需求，模块已经成为了代码管理/编译、业务分离的基本单元。

一、参考资料

es-module-history
网页性能管理详解
defer和async的区别
可能是最详细的UMD模块入门指南
在浏览器中使用 ECMAScript Modules

二、发展历史

js的设计之初就是为了满足简单的页面设计+表单提交，并无模块化 or 命名空间的概念
而是实实在在的需求推进了所有技术的演进，模块化也是。
站在前端发展的上帝视角来看，随着前端的能力在纵深都得到增强之后，迫切的需要更好的代码管理、组织、通信的模式，各种模块化的技术方案开始出现。
现如今模块已经成为了代码管理/编译，业务分离的基本单元。

总的发展历史：

无模块化(IIFE) -> CommonJS -> AMD -> CMD -> ESModule、UMD

1.无模块化需求:

开始需要在页面中加载不同的js：动画、组件、格式化
多种js分布在不同的文件中
不同的文件又被同一个模块中引用

文件拆分是最基础的模块化
<script src=https://www.isolves.com/it/cxkf/qd/2023-03-10/'jq.js'>// ...问题：这个时期函数命名可能会冲突，影响到其他人写的代码
引出的问题:

script标签的参数 - async & defer 的区别？

文章插图

总结：主要是对标签下载和执行时机的控制

普通标签 - 遇到标签就去下载，下载完毕之后立刻去解析代码并执行，这个时候会阻塞GUI线程渲染
defer - 遇到标签之后异步下载，下载完成之后等待其他标签解析完成之后开始执行（在主线程解析完成之后才执行，降低脚本的优先级，保持用户体验，使用相对较多）
async - 遇到标签之后异步下载，下载完成之后立即执行并阻塞渲染，执行完成之后继续渲染（异步下载结束之后立即执行，不保证脚本执行顺序，一般用来给那些不需要任何依赖的脚本使用）
拓展
ESM 默认是通过 defer 的方式加载的，所以是不需要在 script 标签上加 defer 属性的

横向拓展