标签：文件 Vite 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的缺点？新出的打包工具缺乏稳定性和使用群落，兼容问题

标签：文件,Vite,gulp,webpack,vite,模块,打包
来源： https://www.cnblogs.com/nature-wind8/p/15939257.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。