浏览器端的模块化问题

• 效率问题：精细的模块划分带来了更多的JS文件，更多的JS文件带来了更多的请求，降低了页面访问效率
• 兼容性问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题
• 工具问题：浏览器不支持npm下载的第三方包

这些问题为什么在node端没有那么明显，反而到了浏览器端变得如此严重呢？

在node端，运行的JS文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高的多

其实根本原因在于：在浏览器端，开发时态（devtime）和运行时态（runtime）的侧重点不一样

开发时态，devtime：

1. 模块划分越细越好

2. 支持多种模块化标准

3. 支持npm或其他包管理器下载的模块

4. 能够解决其他工程化的问题

运行时态，runtime：

1. 文件越少越好

2. 文件体积越小越好

3. 代码内容越乱越好

4. 所有浏览器都要兼容

5. 能够解决其他运行时的问题，主要是执行效率问题

这种差异在小项目中表现的并不明显，可是一旦项目形成规模，就越来越明显。

解决办法

既然开发时态和运行时态面临的局面有巨大的差异，因此，我们需要有一个工具，这个工具能够让开发者专心的在开发时态写代码，然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。

这样的工具，叫做构建工具

常见的构建工具

• webpack: 一个功能强大的静态模块打包工具，可以处理 JavaScript、CSS、图片等各种资源，并且支持代码拆分、懒加载、自动化优化等功能。
• grunt: 一个 JavaScript 任务运行器，可以自动化执行各种开发任务，如代码压缩、文件合并、文件复制等。它通过 Gruntfile.js 配置文件定义任务和任务插件。
• gulp: 另一个 JavaScript 任务运行器，与 Grunt 类似，但使用了流（stream）的概念，可以实现更高效的构建过程。通过编写 Gulpfile.js 配置文件，可以定义一系列任务和任务插件。
• rollup: 一个现代 JavaScript 模块打包器，专注于打包 ES6 模块，适用于编写库和框架。Rollup 通过 Tree Shaking 技术可以将未使用的代码排除在最终的 bundle 文件之外，从而减小文件体积。
• browserify
• vite
• ...