【笔记】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 使⽤ Go 编写，并且⽐以 JavaScript 编写的打包器预构建依赖快 10-100 倍。webpack打包流程 面试
Vite的缺点？新出的打包⼯具缺乏稳定性和使⽤落，兼容问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。