前端构建工具对比 webpack、vite、esbuild等

2024-01-19 13:12

本文主要是介绍前端构建工具对比 webpack、vite、esbuild等,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

人类和动物最大的区别是会使用工具,工具的作用就是提升我们的生产效率,同样,随着前端工程化的演进,伴随着一些优秀的工程化的生产效率工具,今天就来聊一聊,前端工程中的构建工具。

前端构建工具按照功能可以分为如下两大类:

  • 转译 - 将高级语法转换为低级的语法结构,把浏览器不能识别的文件,转换成浏览器能识别的文件;
  • 打包 - 将项目中的更重资源文件(如 html,css,json 等文件)打包压缩优化成想要的结果。

打包工具

工具名称底层实现语言优点缺点github star
webpackjs1. 作用:将多个模块打包成一个或多个文件,并对文件进行优化压缩,提高页面的加载速度和体验
2. 支持 CommonJS、AMD、ES6 等模块化规范;
3. 生态丰富,有丰富的插件系统
1. 构建速度较慢;
2.打包体积大;
3.上手难度大,需要复杂的配置,依赖项管理比较复杂;
63.9K
vitets相比webpack 更快的打包速度,易上手,简单,更快的开发体验;1. 对旧版本的浏览器的兼容不好,因为它是基于ES模块化进行开发的;
2. 生态相比webpack 来说没那么成熟
62.6k
parceljs比 vite 还简单,自动化无需配置,号称零配置生态弱,缺少一些高级功能42.9k
esbuildgo最快,官方给出的速度对比是其他工具的近百倍配置灵活度低,生态较弱36.7k
gulpjs基于node.js 可以跨平台运行 ,插件机制扩展性强,非常灵活1.它没有模块化,属于 jquery 的时代;
2.配置复杂、功能少,因为过于灵活反而考验开发者的经验和技能
32.8k

转译工具

工具名称作用
babel将ES6 和更高级的语法转换为 ES5
tsc将ts 文件转译成js 文件

这篇关于前端构建工具对比 webpack、vite、esbuild等的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/622527

相关文章

Python使用FFmpeg实现高效音频格式转换工具

《Python使用FFmpeg实现高效音频格式转换工具》在数字音频处理领域,音频格式转换是一项基础但至关重要的功能,本文主要为大家介绍了Python如何使用FFmpeg实现强大功能的图形化音频转换工具... 目录概述功能详解软件效果展示主界面布局转换过程截图完成提示开发步骤详解1. 环境准备2. 项目功能结

Linux系统之stress-ng测压工具的使用

《Linux系统之stress-ng测压工具的使用》:本文主要介绍Linux系统之stress-ng测压工具的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、理论1.stress工具简介与安装2.语法及参数3.具体安装二、实验1.运行8 cpu, 4 fo

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

Linux中的more 和 less区别对比分析

《Linux中的more和less区别对比分析》在Linux/Unix系统中,more和less都是用于分页查看文本文件的命令,但less是more的增强版,功能更强大,:本文主要介绍Linu... 目录1. 基础功能对比2. 常用操作对比less 的操作3. 实际使用示例4. 为什么推荐 less?5.

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述:当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

Python使用Turtle实现精确计时工具

《Python使用Turtle实现精确计时工具》这篇文章主要为大家详细介绍了Python如何使用Turtle实现精确计时工具,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... 目录功能特点使用方法程序架构设计代码详解窗口和画笔创建时间和状态显示更新计时器控制逻辑计时器重置功能事件

一文教你Java如何快速构建项目骨架

《一文教你Java如何快速构建项目骨架》在Java项目开发过程中,构建项目骨架是一项繁琐但又基础重要的工作,Java领域有许多代码生成工具可以帮助我们快速完成这一任务,下面就跟随小编一起来了解下... 目录一、代码生成工具概述常用 Java 代码生成工具简介代码生成工具的优势二、使用 MyBATis Gen

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签