【笔记】gulp、webpack、vite的区别

webpack和gulp都是热门的前端构建工具，他们的区别是什么呢？

    gulp的官网上是这样介绍的，“gulp是一个工具包，可帮助您自动化开发工作流程中繁重而耗时的任务。”，说明gulp旨在强调自动化前端构造流程，通过用户自定义配置一系列的任务(Task)，并排列好顺序后执行，从而构建自动化流程。

　  让我们再看下webpack的介绍，“webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。”，从而我们可以看出webpack侧重的是模块化前端开发流程，就像分类管理的概念，将相同东西（例如css文件，js文件，图片文件）分类组成成单独的模块。

gulp基于（node）stream流处理文件的读写，打包、编译速度快，有明晰的api，task流程，但是不包含模块的概念，对于依赖的统计不是那么明白；

而webpack的基本概念就是模块划分，集成了明确的依赖包和版本，新增插件的处理也很简单，但是有繁杂的配置。这两者各有优势，可以合理搭配使用。

 

    近来跟随Vue3 新出 Vite 被称为”下一代前端开发与构建工具“，基于原生ES-Moudle开发, 紧跟es6的潮流。

    Vite 的特点

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

    光看这三点好像webpack也可以，但它的优越性在于利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间.

    Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

    Vite 使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

    Vite的缺点？新出的打包工具缺乏稳定性和使用群落，兼容问题