webpack、rollup、vite、esbuild 前端构建工具到底有什么关系和区别?

一、为什么需要构建工具,前端构建工具具体干了些什么?

前端最开始的开发模式为HTML+JS+CSS,写起来痛不欲生,要直面js操作dom、浏览器兼容js / css、代码压缩、开发中要不断手动刷新等问题。直到nodeJS后,出现了angular、react、vue等基于nodejs的前端框架,但是各前端框架都有自己的语法和框架机制,而这些东西浏览器并不认识,所以就需要一个构建工具,将框架的东西转成浏览器认识的HTML+JS+CSS。

构建工具主要做了些什么事?

  • 代码转换,例如将 ts 转换为 js 、jsx转换为js等。
  • 浏览器兼容,例如将es6降级到es5、css添加浏览器前缀、添加补丁等。
  • 代码压缩,js压缩、css压缩、gzip 压缩等。
  • 代码拆分,将大体积文件进行分割,达到页面快速加载响应的效果等。
  • 热更新,开发过程中修改代码后自动刷新页面,而不用手动去刷新。
  • tree-shaking:打包过程中自动剔除没有使用的代码。
    … …

目前提及较多的构建工具有:比较老牌的webpack,在ESM出现后的较新工具:rollup、esbuild、vite等。此文主要记录他们之间的关系,内容主要来自各个大佬的博客,加上自己的理解,文章内容主要引用自:

webpack、rollup、vite、esbuild优劣势详解
Vite 是如何站在巨人的肩膀上实现的

后面出现的构建工具,都会与webpack进行比较,同时webpack也在进步,比如新版本webpack中的联邦模块。但在这些构建工具中,能对等webpack的其实只有vite,rollup和esbuild都有各自的重心以及局限性,不适合作为一个完整的web应用构建工具。总的来说:

  • webpack是一个完整的web应用构建工具,提供各种资源处理、开发服务器和生产版本构建
  • Vite是一个新型前端构建工具,基于esbuild和rollup的双引擎架构,默认的构建目标是支持Es模块的浏览器
  • rollup专注于ES模块,追求的是小,更适合纯js类库的打包
  • esbuild使用go语言开发,追求的是快

二、webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具,可以处理不同的资源文件。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

  • 优势:
    • 支持 CommonJS、AMD、ESM 等多种模块化
    • 拥有各种plugin和loader处理各类型的资源文件,支持各种配置,高度的自定义
    • 可以实现代码转换、浏览器兼容、代码压缩、代码拆分、devServer、热更新等功能
    • 生态完整,基本上你需要的都能找到对应的插件实现
  • 不足:
    • 构建速度慢:因为webpack构建时,先要构建出完整的依赖树,再根据依赖树进行代码分析、资源处理,所以随着项目内容的增多,构建也会越来越慢。特别在低版本中,构建依赖树时会和node_modules 下的一起分析,依赖的增多也会导致速度变慢。(但在webpack高版本中添加了联邦模块的内容,有效的解决了第三方依赖的构建问题。)
    • 热更新速度慢:因为修改代码时,webpack总要重新构建依赖树,导致热更新也会慢
    • 构建产物体积大:在构建过程中,webpack会将构架的代码转换为模块,并像模块中添加依赖项,因此输入的产物中,会出现一些webpack自己添加的东西,并不是那么“干净”
    • 配置复杂:因为高度的可自定义,各种的plugin和loader,学习难度较大,配置十分繁琐

三、rollup

rollup是一个专注于ES Modules的JavaScript打包器,基于ES6提出的ESM而出现的。

  • 优势:
    • 专注于模块的 Tree-shaking(树摇)和代码的优化,以减少输出的文件大小。
    • 简单的配置(只打包ES模块的确很简单,但打包 CommonJS 模块时的配置,并不那么简单。。。)
    • 支持代码转换、浏览器兼容、代码压缩、代码拆分等功能
    • 构建产物体积小:相对于webpack比较干净(没有像webpack一样往代码里边添加了各种依赖工具等内容)
  • 不足:
    • 更适合纯js类库的打包,而不是web应用,对js以外的资源支持不如webpack
    • 不支持HMR

四、esbuild

esbuild 是使用go语言编写的一个前端构建工具,相比使用nodejs的构建工具更快。

  • 优势:
    • 使用go语言开发,运行时没有js的解释环节;多线程并行,比js的单线程串行化更快。
    • 内置部分loader使用go语言实现,相比其他工具的相同功能loader更快;可以直接使用内置loader对部分资源进行处理。
    • 配置简单
    • 支持多种模块格式,适用于任何类型的 JavaScript 项目
  • 不足:
    • 生态不完善,很多社区插件有问题,或者需要手写插件,且很多插件只是包装了一下开源的东西,本质上还是js
    • 代码拆分鸡肋,只支持esm 格式,只能对动态 import 的内容或多入口同时用到的代码进行分割,无法做到像webpack一样将使用到的某个库单独打包出去。
    • 不支持 HMR
    • 没有提供AST能力,不能转换成兼容低版本浏览器代码
    • 不适合直接在生产环境使用,更适合作为一种偏底层的模块打包工具,而不是web应用打包

五、vite

  • vite是一种新型前端构建工具,Vite 底层使用了两个构建引擎:Esbuild和Rollup,在开发环境使用Esbuild进行快速构建,在生产环节使用rollup。vite。
  • Vite 利用Esbuild Bundler 的功能进行依赖预构建,用其 Transformer 的能力进行 TS 和 JSX 文件的转译,也用到它的压缩能力进行 JS 和 CSS 代码的压缩。
  • 在 Vite 当中,无论是插件机制、还是底层的打包手段,都基于 Rollup 来实现,可以说 Vite 是对于 Rollup 一种场景化的深度扩展,将 Rollup 从传统的 JS 库打包场景扩展至完整 Web 应用打包
  • 优势:
    • 快速的冷启动:vite在开发环境启动开发服务器是直接启动的,而不需要想webpack一样去分析依赖
    • 快速的预构建:在开发阶段的依赖预构建阶段,Esbuild为Vite提供Bundle 打包工具,完成第三方依赖的预构建
    • 快速的HMR:利用ES模块的特性,根据请求按需编译,而不是像webpack一样更新整个依赖树
    • 快速的文件构建和压缩:使用esbuild替换babel、tsc的进行代码转换工作,更快的完成转换;使用esbuild替换Terser 这种js压缩器,更快的完成压缩
    • 基于rollup的代码拆分、预加载等生产环境编译,打包产物体相对webpack更小更“干净”
  • 不足:
    • 对于旧浏览器支持较差,由于 Vite 采用了 ES 模块化和原生浏览器 APIs,因此在旧版本的浏览器中可能会出现兼容性问题。
    • 社区支持和生态系统仍处于相对早期的阶段

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/2843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MybatisPlus(简单CURD,MP的实体类注解,MP条件查询,MP分页查询,MP批量操作,乐观锁,代码生成器)

目录 一、MP入门 1. MP是什么 2. MP使用入门 1 说明 2 准备MP项目环境 1) 添加依赖 2) 创建配置文件 3) 创建引导类 3 MP使用入门 1 创建实体类 2 创建Mapper 3 使用测试 3. 小结 二、MP简单CURD【重点】 1. 说明 2. 示例 3. 小结 三、MP的实体类注解[重点] …

字符串漏洞注入深入学习

字符串型漏洞注入,特别是针对Web应用程序的SQL注入,是一种常见的网络安全威胁。它涉及攻击者在不受控制的情况下,通过构造特定的字符串输入,干扰或改变应用程序中原有的SQL查询语句,从而执行恶意的SQL代码。 要深入学…

常用vim命令

vim 是一种文本编辑器,常用于命令行界面下。它具有强大的功能和灵活的配置选项,适用于编辑各种类型的文本文件,包括代码文件、配置文件等。使用 vim 可以进行文本的编辑、查找、替换、复制、粘贴等操作。 1、编辑文件 - vim filename&#x…

微软Phi-3,3.8亿参数能与Mixtral 8x7B和GPT-3.5相媲美,量化后还可直接在IPhone中运行

Phi-3系列 Phi-3是一系列先进的语言模型,专注于在保持足够紧凑以便在移动设备上部署的同时,实现高性能。Phi-3系列包括不同大小的模型: Phi-3-mini(38亿参数) - 该模型在3.3万亿个令牌上进行训练,设计得足…

go学习知识点

学习 Go 语言涉及许多不同的概念和知识点。以下是一些关键的学习领域: 基础概念 变量和类型:了解 Go 的基本数据类型,如整型、浮点型、布尔型、字符串等,以及如何声明和使用变量。包管理:学习如何导入和使用其他包&a…

【Stable Diffusion系列】(一):AI绘画本地部署教程

目录 一、总览 二、本地部署 1、安装cuda 2、安装python 3、安装git 4、方法一 1)获取安装包 2)update 3)run 5、方法二 1)git clone 2)双击webui-user.bat 3)更新 6、设置启动参数 7、…

指针(5)

前言 本节是有关指针内容的最后一节,本节的内容以讲解指针习题为主,那么就让我们一起来开启本节的学习吧! sizeof和strlen的对比 1.sizeof 我们在学习操作符的时候,学习了sizeof。sizeof存在的意义是用来计算变量所占用的内存空…

AI大模型日报#0424:全球首个AI基因编辑器、出门问问上市、微软开源Phi-3 Mini、昆仑万维年收49亿

导读: 欢迎阅读《AI大模型日报》,内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了每条资讯的摘要。标题: 爱诗科技完成A2轮超亿元融资,蚂蚁集团领投摘要: 爱诗科技完成A2轮超亿元融资,成为视频大模型领域融资规模最…

STM32学习和实践笔记(20):定时器

1.定时器介绍 STM32F1的定时器一共有8个,由2个基本定时器(TIM6、TIM7)、4个通用定时器(TIM2-TIM5)和2个高级定时器(TIM1、TIM8)组成。 基本定时器的功能最为简单,类似于51单片机内定…

前置路由守卫、后置路由守卫,前置请求守卫、后置请求守卫

前置路由守卫、后置路由守卫,前置请求守卫、后置请求守卫 在Vue 3和Axios中,路由守卫和请求守卫是用于控制路由跳转和HTTP请求的关键机制。 下面是这些守卫的介绍和使用方式: 前置路由守卫(Before Route Guards) 前置…

【行为型模式】中介者模式

一、中介者模式概述 中介者模式定义:用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互。中介者模式又称为调停者模式。(对象行为型模式) 中介者模式…

python+django校园社交高校交友网站2x7r5.

本课题使用Python语言进行开发。代码层面的操作主要在PyCharm中进行,将系统所使用到的表以及数据存储到MySQL数据库中,方便对数据进行操作本课题基于WEB的开发平台,设计的基本思路是: 前端:vue.jselementui 框架&#…

Node.JS安装及配置教程(Windows)【安装】

文章目录 一、 Node.JS 下载1. 官网下载(1)国内地址(2)国外地址 2. 其它渠道 二、 Node.JS 安装三、 Node.JS验证四、 Node.JS 配置(可选)1. 配置全局模块安装路径方法一方法二2. 配置国内镜像 五、 yarn 安…

企业数智化:为什么选择梧桐数据库?

个人介绍:艺名司镜233,是中国移动梧桐数据库研发团队成员,从事相关的技术开发近5年了。最让我觉得自豪的不是在研发这款数据库,而是我们用代码,切实地帮助企业解决数据的困扰,切实地解决社会的问题。 本篇文…

大模型自动优化 Prompt 的可行性分析

随着自然语言处理领域的快速发展,大模型(Large Language Models)已经成为了当前研究的热点。大模型通过在海量语料上进行预训练,能够学习到丰富的语言知识和通用表示,在各种自然语言处理任务上取得了突破性的进展。然而…

【炼金术士】BatchSize对网络训练的影响

文章目录 1 BatchSize对于网络训练的影响2 调整学习率可以提高大BatchSize的性能3 实际训练时的建议3.1 设置初始学习率的方法3.2 多卡训练时学习率的设置 参考资料: 【深度学习】Batch Size对神经网络训练的影响【AI不惑境】学习率和batchsize如何影响模型的性能&…

答疑(蓝桥杯)

文章目录 答疑问题描述贪心 答疑 问题描述 有 n 位同学同时找老师答疑。每位同学都预先估计了自己答疑的时间。 老师可以安排答疑的顺序,同学们要依次进入老师办公室答疑。 一位同学答疑的过程如下: 首先进入办公室,编号为 i 的同学需要…

一文搞懂computed和watch:Vue中的响应式双胞胎

目录 1. 理解computed与watch computed(计算属性): watch(侦听器): 2. 使用场景与实例 computed应用 适用场景: 实例: watch应用 适用场景: 实例: …

AXI4---低功耗接口

在电子系统设计中,"low-power interface"(低功耗接口)是指专为减少能耗而设计的硬件接口。这类接口在不需要牺牲性能的情况下,通过各种技术降低功耗,对于移动设备、嵌入式系统和其他电池供电的应用来说尤其重…

如何更好的管理个人财务?使用极空间部署私有记账系统Firefly III

如何更好的管理个人财务?使用极空间部署私有记账系统Firefly III 哈喽小伙伴们好,我是Stark-C~ 不知道屏幕前的各位“富哥”日常生活中是怎么管理自己巨额财富的,反正对于像我这样年薪过千的摸鱼族来说,请一个专业的理财顾问多多…