前言 | 高小哥漫谈前端

技术咨询、项目合作、广告投放、简历咨询、技术文档下载点击这里联系博主

# 前言

模块化管理工具和自动化构建工具是不同的。两者主要体现在侧重点不一样。自动化构建工具侧重于前端开发的 整个过程 的控制管理（像是流水线）。而模块化管理工具更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js 文件、css 文件等）都可以看成模块。

# Webpack

webpack 可以说是当前最流行的模块化管理工具和打包工具。其通过 loader 的转换，可以将任何形式的资源视作模块。它还可以将各个模块通过其依赖关系打包成符合生产环境部署的前端资源。它还可以将应用程序分解成可管理的代码块，可以按需加载。

打包原理：

解析各个模块的依赖关系使用 loader 转换文件，使用 plugin 注入钩子，打包合并模块，最终生成 bundle 文件，使用 express 开启本地服务器，浏览器请求的是 bundle 文件，也就是打包过后的文件。

优点：

基本之前 gulp 可以进行的操作处理，现在 webpack 也都可以做；
同时支持热更新，支持 tree shaking 、Scope Hoisting、动态加载、代码拆分、文件指纹、代码压缩、静态资源处理等；
支持多种打包方式。

等等

缺点：

1.各个模块之间的依赖关系过于复杂会导致打包速度很慢

2.使用热更新时，改动一个模块，其他有依赖关系的模块也会重新进行打包

3.不支持打包出 esm 格式的代码 (打包后的代码再次被引用时 tree shaking 困难)，打包后亢余代码较多。

# Vite

和 webpack 差不多，vite 是当下新兴的模块化管理工具和打包工具。它的本地启动速度相较于 webpack 快了很多，但是目前来说，vite 还完全没有能够替换 webpack 的能力，不管是从社区还是从能力来讲，vite 他本身还是太过脆弱，他的产生跟火热完全依赖于 vue 本身的热度。

打包原理:

使用 koa 开启本地服务器，没有 webpack 那样打包合并的过程，所以启动服务器很快，@vue/compiler-sfc 会对模块进行编译（修改一些引入文件的路径 css 编译成 js 字符串）浏览器再请求编译好的模块。

缺点:

项目的开发浏览器要支持 esmodule
不能识别 commonjs 语法
生态不及 webpack，加载器、插件不够丰富
生产环境 esbuild 构建对于 css 和代码分割不够友好
没被大规模重度使用，会隐藏一些问题

vite 和 webpack 的区别

webpack 是先打包再启动开发服务器，vite 是直接启动开发服务器，然后按需编译依赖文件。

webpack 先打包，再启动开发服务器，请求服务器时直接给予打包后的结果；vite 直接启动开发服务器，请求哪个模块再对哪个模块进行实时编译；
由于现代浏览器本身就支持 ES Modules，会主动发起请求去获取所需文件。vite 充分利用这点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像 webpack 先打包，交给浏览器执行的文件是打包后的；
**为什么启动速度快？**由于 vite 启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite 的开发时优势越明显；
**HRM 为什么速度快？**在 HRM 方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像 webpack 重新将该模块的所有依赖重新编译；
不能识别 commonjs 语法: 当需要打包到生产环境时，vite 使用传统的 rollup 进行打包，所以，vite 的优势是体现在开发阶段，另外，由于 vite 使用的是 ES Module，所以代码中不可以使用 CommonJs；

# Rollup

Rollup 是一个模块打包工具, 可以将我们按照 ESM (ES2015 Module) 规范编写的源码构建输出如下格式:

IIFE: 自执行函数, 可通过 <script> 标签加载
AMD: 通过 RequireJS 加载
CommonJS: Node 默认的模块规范, 可通过 Webpack 加载
UMD: 兼容 IIFE, AMD, CJS 三种模块规范
ESM: ES2015 Module 规范, 可用 Webpack, Rollup 加载

优点：

支持动态导入。
支持 tree shaking。仅加载模块里用得到的函数以减小文件大小。
Scope Hoisting。 rollup 可以将所有小文件生成到一个大文件中，所有代码都在同一个函数作用域里:，不会像 Webpack 那样用很多函数来包装模块。
没有其他冗余代码, 执行很快**。**除了必要的 cjs, umd 头外，bundle 代码基本和源码差不多，也没有奇怪的 __webpack_require__, Object.defineProperty 之类的东西,

缺点：

不支持热更新功能；
对于 commonjs 模块，需要额外的插件将其转化为 es2015 供 rollup 处理；
无法进行公共代码拆分。

适用场景：

由纯 js 开发的第三方库；需要生成单一的 umd 文件的场景

比较（和 webpack）：

基于权衡，Rollup 目前还不支持代码拆分（Code Splitting）和模块的热更新（HMR）
一般而言，对于应用使用 Webpack，对于类库使用 Rollup；
需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多 CommonJS 模块的依赖时，使用 webpack。代码库是基于 ES6 模块，而且希望代码能够被其他人直接使用，使用 Rollup
Rollup 与 Webpack 有着不同的用途，因此会共同存在，并相互支持
React 已经将构建工具从 Webpack 换成了 Rollup

# Gulp

Gulp 是基于“流”的前端自动化构建工具，采用代码优于配置的策略，更易于学习和使用，它让简单的任务简单，复杂的任务可管理。

它是基于 Nodejs，自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

优点：

gulp 文档简单，学习成本低，使用简单；
对大量源文件可以进行流式处理，借助插件，可以对文件类型进行多种操作处理。

缺点：

不支持 tree-shaking、热更新、代码分割等；
gulp 对 js 模块化方案无能为力，只是对静态资源做流式处理，处理之后并未做有效的优化整合。

适用场景：

静态资源密集操作型场景，主要用于 css、图片等静态资源的处理操作。

比较（和 grunt）：

易用。Gulp 相比 Grunt 更简洁，而且遵循代码优于配置策略，维护 Gulp 更像是写代码。
高效。Gulp 相比 Grunt 更有设计感，核心设计基于 Unix 流的概念，通过管道连接，不需要写中间文件。
高质量。 Gulp 的每个插件只完成一个功能，这也是 Unix 的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt 的 imagemin 插件不仅压缩图片，同时还包括缓存功能。他表示，在 Gulp 中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有 673 个插件。
易学。 Gulp 的核心 API 只有 5 个，掌握了 5 个 API 就学会了 Gulp，之后便可以通过管道流组合自己想要的任务。
流。使用 Grunt 的 I/O 过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用 Gulp 的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次 I/O 的过程，流程更清晰，更纯粹。
代码优于配置。维护 Gulp 更像是写代码，而且 Gulp 遵循 CommonJS 规范，因此跟写 Node 程序没有差别。

使用：

快速入门 · gulp.js 中文文档 (opens new window)

# Grunt

Grunt 是一套前端自动化工具，帮助处理反复重复的任务。一般用于：编译，压缩，合并文件，简单语法检查等

特点：

Grunt 有一个完善的社区，插件丰富，根据社区的结果 (opens new window)显示，共计 3,439 个插件，其中 49 个官方插件。
它简单易学，你可以随便安装插件并配置它们。许多常见的任务都有现成的 Grunt 插件，而且有众多第三方插件，如：CoffeeScript，Handlebars，Jade，JsHint，Less，RequireJS，Sass，Styles。而且通过参考文档进行配置便可以使用。
你不需要多先进的理念，也不需要任何经验。