前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc

文章目录

• • 背景
  • 分类
  • • 转译器
    • 打包器
  • 对比
  • • gulp VS webpack
    • Bundle vs Bundleless（代表就是webpack VS vite）
    • 其他比较
  • 个人理解总结
  • 官网

背景

做前端也有好多年了，从最早的 jQuery 时代到现在的三大框架，这过程中用到了很多构建工具，今天就来盘点一下我们前端开发常用的这些构建工具。

盘点之前呢，我们先聊聊现代前端开发的痛点，也是这些构建工具出现的原因：

• 开发过程注重速度、配置复杂度
• 线上部署注重体积

分类

我们根据功能将这些工具分为两种：
转译器：将一门高级语音转译为另一种高级语言，如 ts 转译为 js、es6 转译为 es5 等等。
打包器：将项目中的各种文件如png、sass、json 等等打包成想要的结果。

转译器：babel、esbuild、swc、tsc
打包器：gulp、webpack、vite、rollup、esbuild、snowpack、parcel

转译器

转译器再分类：
用js/ts实现的：babel、tsc
其他语言实现的：esbuild（go）、swc（rust）

这里的区别主要是性能，其他语言实现的性能会高一些，比如 esbuild 官网就号称速度比其他工具高这么多

打包器

也可以分为两类：
一类是通过监听源代码变化然后重新构建项目将打包后的代码推送到浏览器的传统模式。如 Webpack、rollup、parcel
另一类是通过浏览器的原生 module 来实现动态打包的 bundleless 模式。如：vite、snowpack

对比

gulp VS webpack

其实平常开发就能明显感觉到，现在这个时代，webpack 比 gulp 使用的频率更高了，但其实并不是 webpack 比 gulp 厉害，而是他们偏向的应用场景不一样，gulp 更偏向将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间。而webpack 更侧重于模块化打包，也就是官网的那张图，将所有依赖的 js、less、png 等等打包为最终需要的模块。

所以在 jQuery 的时代，更多的是用 gulp，做代码压缩之类的事情。
在现在的 SPA 单页面应用的时代，更多使用 webpack，对不同的模块进行打包，并且通过 plugin 也能实现压缩等功能。

虽然在一些功能上确实有重复，比如：文件合并、压缩、less/sass编译等等，但是对于 gulp 来说模块化不是他强调的东西，他旨在规范前端开发流程。而 webpack 更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

gulp 强调的是前端开发的工作流程，通过配置一系列的task，定义执行顺序，来让gulp执行，从而构建项目的整个前端开发流程。
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

gulp 时代没有模块化是依赖 RequireJS、SeaJS 的

Bundle vs Bundleless（代表就是webpack VS vite）

传统的 webpack 等工具会把代码打包成 Bundle 文件，而 vite 则是依赖原生的 ESM 来实现的，虽然在生产环境仍然要打包。

为什么 vite 生产环境要打包？
尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）。为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。

在过去我们一般都会使用Webpack这个打包构建工具来打包构建我们的代码，那为什么过去需要打包，简单来说就是一下几点：

• HTTP/1.1 各浏览器有并行连接限制
• 浏览器不支持模块系统（如 CommonJS 包不能直接在浏览器运行）
• 代码依赖关系与顺序管理

为什么开始尝试不打包

• 随着项目不断变大，启动和热更新所等待的时间越来越长
• HTTP/2.0 多路并用
• 各大浏览器逐一支持 ESM
• 原生的解决了代码依赖和复用的问题
• 越来越多的 npm 包拥抱 ESM（尽管很多包的依赖并不是）
  

其他比较

Rollup 通常用来打包第三方库，vite 在生产环境打包也使用的 rollup，在预购建依赖的时候使用 esbuild。

Parcel 和 Webpack 的功能类似，但是它简化了配置，号称零配置、开箱即用。
Parcel 2 的 JS 转译器部分基于 SWC 进行开发，性能有很大提升。

Snowpack 是最早的 bundleless 打包器之一，它最大的特点就是闪电般的速度，但是生态不行。

个人理解总结

可以看到，未来有两个趋势：

• 一个基于 ESM 实现的 bundleless 模式。
• 一个是基于其他语言实现的打包器。

都使得前端开发速度更快，JavaScript 和我一样诞生于1996，在这短短几年的时间，发展的如此迅速，各类开发工具日新月异、欣欣向荣，希望未来这个行业能越来越好！！

官网

gulp：https://www.gulpjs.com.cn/
webpack：https://webpack.docschina.org/
vite：https://vitejs.cn/
rollup：https://www.rollupjs.com/
esbuild：https://esbuild.github.io/
snowpack：https://www.snowpack.dev/
babel：https://www.babeljs.cn/
parcel：https://parceljs.org/
swc：https://swc.rs/
tsc：https://www.typescriptlang.org/ 只要下载了 typescript 就可以使用该命令 npm i typescript -g tsc index.ts

查看全文

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章：

前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc

文章目录背景分类转译器打包器对比gulp VS webpackBundle vs Bundleless（代表就是webpack VS vite）其他比较个人理解总结官网背景
做前端也有好多年了，从最早的 jQuery 时代到现在的三大框架，这过程中用到了很多构建工具&#xf……

编程日记2023/3/3 14:14:38

MSF手机渗透实验(未成功)（CVE-2019-2215 Binder UA）

1. 前言
最近想利用metasploit对手机进行依次渗透实验。
通过查看最近三年的安卓漏洞，我对CVE-2019-2215这个漏洞很感兴趣。
幸运的是，metasploit里就有这个漏洞的攻击payload，于是我就开始试试了。
msf6 > search binderMatching Mod……

编程日记2023/3/3 14:14:27

在Windows上搭建Flutter开发环境

在Windows上搭建Flutter开发环境
——————— 作者：马志武 来源：CSDN 原文：https://blog.csdn.net/ruoshui_t/article/details/90376859 版权声明：本文为博主原创文章，转载请附上博文链接！…

编程日记2023/3/3 14:14:16

想象力训练

一、课程目的1、了解想象力2、想象力训练二、静态想象法常用在单一图片上，比如一辆自行车要点1、形象鲜明 (大脑中生动的展现它的样子)2、放大:一点点放大它(后续的课程讲解经常用到放大这个方法)3、缩小:一点一点缩小它4、变多:一个变两个，两个变三个&a……

编程日记2023/3/3 14:14:15

推荐几个免费看漫画的资源网站，请低调收藏

1、木马动漫
https://omyschool.com/ 2、第6夜漫画
http://www.d6ye.com/ 3、土豪漫画
https://www.tohomh123.com/ 4、动漫屋
http://www.dm5.com/ 5、漫画柜
https://www.manhuagui.com/…

编程日记2023/3/3 14:14:14

推荐个线上看漫画的网站

漫画小说 漫画工具 小说工具 第6夜 第6夜漫画 第6夜小说 木马动漫 爱玉米动漫…

编程日记2023/3/3 14:14:13

Flutter学习总纲教程

Flutter学习总纲教程准备Flutter 常用组件Flutter 常用布局Flutter 页面跳转Flutter 导航[Flutter Widget 目录](https://blog.csdn.net/ruoshui_t/article/details/95482557)准备
学习Flutter之前，必须要了解（不需要多么精通，但至少要了解&……

编程日记2023/3/3 14:14:13

厚积薄发百变求新 | 科士达100kW/125kW 超大功率模块UPS重磅发布

3月2日下午，“厚积薄发百变求新” 科士达100kW/125kW超大功率模块UPS新品发布会在云上顺利举办。会上，科士达正式推出100kW/125kW超大功率模块UPS，该产品功率密度较主流的50kW功率模块UPS提升了一倍，跨越了高密新高度。 本次发布会……

编程日记2023/3/3 14:14:02

HNU工训中心：数模转换实验报告

D 级任务：实验 74194 的仿真验证
1. 实验任务
任务:实验 74194 的仿真验证，掌握 Quartus 仿真的基本原则和常规步骤，记录移 位寄存器的数据读写，并描述仿真波形，结果分析并记录到实验报告。
实验实作
最终的电路图……

编程日记2023/3/3 14:13:49

图像格式简介

虽然目前有很多种图像格式，但常用的不多，这里主要简介这几种： windows下的主要图像格式是bmp。 以前单色手机的图像格式是wbmp。 网页和网络流行图像格式是gif，png和jpeg。 bmp：windows下的常用格式，虽然也……

编程日记2023/3/3 14:13:11

【Java开发】设计模式 12：解释器模式

1 解释器模式介绍
解释器模式是一种行为型设计模式，它提供了一种方法来解释语言、表达式或符号。
在该模式中，定义了一个表达式接口，并实现了对应的表达式类，这些类可以解释不同的符号组成的表达式，从而实现对语言的……

编程日记2023/4/16 14:54:05

反序列化渗透与攻防(五)之shiro反序列化漏洞

Shiro反序列化漏洞
Shiro介绍
Apache Shiro是一款开源安全框架，提供身份验证、授权、密码学和会话管理。Shiro框架直观、易用，同时也能提供健壮的安全性
Apache Shiro 1.2.4及以前版本中，加密的用户信息序列化后存储在名为remember-me的Cookie中。攻击者可以使用Shiro的默……

编程日记2023/4/16 14:52:13

vue2+vue3

vue2vue3尚硅谷vue2vue2 课程简介【02:24】vue2 Vue简介【17:59】vue2 Vue官网使用指南【14:07】vue2 搭建Vue开发环境【13:54】vue2 Hello小案例【22:25】了解： 不常用常用：id 更常用 简单class差值总结vue 实例vue 模板 ： 先 取 &#xff0……

编程日记2023/4/16 14:52:00

【hello Linux】环境变量

目录 1. 环境变量的概念 2. 常见的环境变量 3. 查看环境变量 4. 和环境变量相关的命令 5. 环境变量的组织方式 6. 通过代码获取环境变量 7. 通过系统调用获取环境变量 Linux🌷 在开始今天的内容之前，先来看一幅图片吧！ 不知道你们是否和我一……

编程日记2023/4/16 14:51:36

【Linux基础】常用命令整理

ls命令
-a选项，可以展示隐藏的文件和文件夹-l选项，以列表形式展示内容-h，需要和-l搭配使用，可以展示文件的大小单位ls -lah等同于la -a -l -h
cd命令（change directory）
语法：cd [Linux路径]……

编程日记2023/4/16 14:51:26

客快物流大数据项目（一百一十二）：初识Spring Cloud

文章目录
初识Spring Cloud
一、Spring Cloud简介
二、SpringCloud 基础架构图…

编程日记2023/4/16 14:51:11

C和C++中的struct有什么区别

区别一： C语言中： Struct是用户自定义数据类型（UDT）。 C语言中： Struct是抽象数据类型（ADT），支持成员函数的定义。
区别二：
C中的struct是没有权限设置的&#xff0c……

编程日记2023/4/16 14:50:59

docker的数据卷详解

数据卷 数据卷是宿主机中的一个目录或文件，当容器目录和数据卷目录绑定后，对方修改会立即同步
一个数据卷可以同时被多个容器同时挂载，一个容器也可以被挂载多个数据卷
数据卷作用：容器数据持久化 /外部机器和容器间接通信 /容器……

编程日记2023/4/16 14:50:50

13、Qt生成dll-QLibrary方式使用

Qt创建dll，使用QLibrary类方式调用dll
一、创建项目
1、新建项目->其他项目->Empty qmake Project->Choose 2、输入项目名，选择项目位置，下一步 3、选择MinGW，下一步 4、完成 5、.pro中添加TEMPLATE subdirs&#xff……

编程日记2023/4/16 14:50:38

基于mapreduce 的 minHash 矩阵压缩

Minhash作用： 对大矩阵进行降维处理，在进行计算俩个用户之间的相似度。
比如： 俩个用户手机下载的APP的相似度，在一个矩阵中会有很多很多的用户要比较没俩个用户之间的相似度是一个很大的计算任务 如果首先对这个矩阵降维处理&am……

编程日记2023/4/16 14:50:37