极速 JavaScript 打包器:esbuild

文章目录

  • 前言
  • 什么是esbuild?
  • esbuild如何实现如此出色的性能?
  • 基本配置
    • 入口文件
    • 输出文件
    • 模块格式
    • target
    • platform
    • external
    • banner和footer
  • 结论


前言

esbuild是一个快速、可扩展的JavaScript打包器和压缩器,它的目标是成为最快的打包器。它使用Go编写,可以在几乎瞬间内完成大多数项目的构建。在本文中,我们将深入了解esbuild,并探讨其如何实现如此出色的性能。


什么是esbuild?

esbuild 是一款基于 Go 语言开发的 javascript 构建打包工具,相比传统的构建工具,主打性能优势。同样规模的项目,使用 Esbuild 可以将打包速度提升 10 - 100 倍,这对广大一直饱受 Webpack 缓慢打包速度折磨的开发人员来说,简直就是福音。

在这里插入图片描述

esbuild的特点

  1. 极快的构建速度esbuild被设计为最快的JavaScript打包器之一。它使用Go编写,并且可以在几乎瞬间内完成大多数项目的构建。这使得它成为处理大型代码库和快速迭代开发过程中不可或缺的工具。
  2. 可扩展性esbuild支持插件系统,这使得开发人员可以根据自己的需求进行自定义配置。插件系统还允许开发人员添加自定义转换器和加载程序。
  3. 支持多种模块格式esbuild支持多种模块格式,包括CommonJS、ES6模块、AMD和UMD等。这使得开发人员可以轻松地将现有代码库迁移到esbuild中。
  4. 支持TypeScriptesbuild支持TypeScript,并且可以直接处理TypeScript文件。这意味着开发人员无需安装额外的TypeScript编译器即可使用TypeScript。
  5. 支持JSXesbuild支持JSX,并且可以直接处理JSX文件。这意味着开发人员无需安装额外的Babel插件即可使用JSX。

esbuild如何实现如此出色的性能?

  1. Go语言esbuild使用Go语言编写,这使得它比其他JavaScript打包器更快。Go语言具有出色的并发性能和内存管理功能,这使得它非常适合用于构建工具。
  2. 并行化处理esbuild使用并行化处理来加速构建过程。它会将输入文件分成多个块,并在多个CPU核心上同时处理每个块。这样做可以显著提高构建速度。例如,在一个包含10个JavaScript文件的项目中,如果将输入文件分成5个块,则每个块包含2个JavaScript文件。然后,在4核CPU上运行时,每个核心将同时处理一个块中的2个JavaScript文件。
  3. AST优化esbuild会对输入代码进行AST(抽象语法树)优化以提高性能。AST优化是一种通过修改代码结构来提高执行效率的技术。例如,在一个包含大量重复代码或未使用变量/函数等未优化代码段的项目中,AST优化可以通过删除重复代码或未使用变量/函数等未优化代码段来减小输出文件大小并提高性能。
  4. Tree shakingTree shaking是一种通过删除未使用代码来减小输出文件大小的技术。esbuild会对输入代码进行Tree shaking以减小输出文件大小并提高性能。例如,在一个包含大量未被引用或未被执行函数/变量等冗余代码段的项目中,Tree shaking可以通过删除冗余代码段来减小输出文件大小并提高性能。

下面是一个简单示例:

// index.js
import { add } from './math.js';console.log(add(1, 2));// math.js
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}

运行以下命令:

npx esbuild index.js --bundle --outfile=out.js

则会生成以下输出:

// out.js
function add(a, b) {return a + b;
}console.log(add(1, 2));

在此示例中,由于subtract函数没有被引用或执行,则Tree shaking会将其删除以减小输出文件大小并提高性能。

esbuild缺点尽管esbuild具有许多优点,但它也有一些缺点。下面是一些esbuild的缺点:

  • 社区生态相对较小
  • 没有 TS 类型检查
  • 不支持代码分割
  • 不支持多种语言(比如vue)
  • 不能操作 AST
  • 不支持装饰器语法
  • 产物 target 无法降级到 ES5 及以下,不能兼容一些低版本浏览器

基本配置

入口文件

在使用esbuild时,需要指定入口文件。可以使用–entry选项指定入口文件,例如:

npx esbuild --entry=index.js --outfile=out.js

输出文件

在使用esbuild时,需要指定输出文件。可以使用–outfile选项指定输出文件,例如:

npx esbuild --entry=index.js --outfile=out.js

模块格式

在使用esbuild时,需要指定模块格式。可以使用–format选项指定模块格式,例如:

npx esbuild --entry=index.js --outfile=out.js --format=esm

支持的模块格式包括:esm(ES6模块)、cjs(CommonJS)、iife(立即执行函数)、amd(AMD)和umd(UMD)。

target

target选项用于指定输出代码的目标环境。可以使用–target选项指定目标环境,例如:

npx esbuild --entry=index.js --outfile=out.js --target=es2015

支持的目标环境包括:es2015(ES6)、es2016(ES7)、es2017(ES8)、es2018(ES9)、es2019(ES10)、es2020(ES11)和esnext(最新版本)。

platform

platform选项用于指定输出代码的平台。可以使用–platform选项指定平台,例如:

npx esbuild --entry=index.js --outfile=out.js --platform=node

支持的平台包括:browser(浏览器)和node(Node.js)。

external

在使用esbuild时,你可以选择将某些模块排除在输出文件之外。可以使用–external:module-name[=variable-name]… 选项排除模块,例如:

npx esbuild --entry=index.js --outfile=out.js --external:react --external:react-dom

在此示例中,我们将React和React DOM排除在输出文件之外。

banner和footer

在使用esbuild时,你可以选择在输出文件的开头或结尾添加自定义文本。可以使用 --banner:file=path/to/banner.txt 和 --footer:file=path/to/footer.txt 选项添加文本,例如:

npx esbuild --entry=index.js --outfile=out.js \ --banner:file=header.txt \ --footer:file=footer.txt

在此示例中,我们将header.txt添加到输出文件开头,并将footer.txt添加到输出文件结尾。

结论

总之,如果你正在寻找一个快速、可扩展且易于配置的JavaScript打包器和压缩器,那么你应该考虑使用esbuild。它具有极快的构建速度、可扩展性、支持多种模块格式、支持TypeScript和JSX等特点,并且通过Go语言、并行化处理、AST优化和Tree shaking等技术实现了出色的性能表现。在选择使用esbuild时,请考虑其优点和缺点,并根据自己项目的需求进行选择。

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

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

相关文章

【C++篇】启航——初识C++(下篇)

接上篇【C篇】启航——初识C(上篇) 目录 一、引用 1.引用的概念 2.引用的基本语法 3.引用的特点 3.1 别名 3.2 不占用额外内存 3.3 必须初始化 3.4 不能为 NULL 4.引用的使用 4.1 函数参数传递 4.2 返回值 4.3 常量引用 5.引用和指针的关…

Spring Task 2024/9/30

Spring Task是Spring框架提供的任务调度工具,可以按照约定时间自动执行某个代码逻辑。 作用:定时自动执行某段java代码。 cron表达式 在线Cron表达式生成器 (qqe2.com)👈在线生成网站 入门案例 SkyApplication 启动类 package com.sky;im…

盛事启幕 | 第三届OpenHarmony技术大会重磅官宣,邀您共绘智联未来

未来已来,科技何向? ——10月12日-13日众多大咖齐聚上海 聚焦OpenHarmony生态前沿 与您一同解码技术的下一片蓝海

C# 委托(Delegate)一

一.Delegate的定义说明: C# 中的委托(Delegate)就是类似于 C 或 C 中函数的指针。Delegate 是存有对某个方法引用的一种引用类型变量,引用可在运行时是可以被改变的,特别适用于实现事件和回调方法。所有的Delegate都是…

网络基础概念和 socket 编程

网络基础概念和 socket 编程 学习目标: 了解 OSI 七层模型、TCP/IP 四层模型结构了解常见的网络协议格式掌握网络字节序和主机字节序之间的转换理解 TCP 服务器端通信流程理解 TCP 客户端通信流程实现 TCP 服务器端和客户端的代码 推荐一个非常好的学习资料仓库 协…

简单线性回归分析-基于R语言

本题中&#xff0c;在不含截距的简单线性回归中&#xff0c;用零假设对统计量进行假设检验。首先&#xff0c;我们使用下面方法生成预测变量x和响应变量y。 set.seed(1) x <- rnorm(100) y <- 2*xrnorm(100) &#xff08;a&#xff09;不含截距的线性回归模型构建。 &…

计算机网络(九) —— Tcp协议详解

目录 一&#xff0c;关于Tcp协议 二&#xff0c;Tcp报头字段解析 2.0 协议字段图示 2.1 两个老问题 2.2 16位窗口大小 2.3 32位序号和确认序号 2.4 6个标记位 三&#xff0c;Tcp保证可靠性策略 3.1 确认应答机制&#xff08;核心&#xff09; 3.2 超时重传机制 3.3 …

基于开源WQ装备知识图谱的智能问答优化2

基于笔者之前写的博客基础上&#xff1a;https://blog.csdn.net/zhanghan11366/article/details/142139488【基于开源WQ装备知识图谱的智能问答全流程构建】进行优化。新增处理基于特定格式下的WQ文档&#xff0c;抽取文档的WQ属性和关系&#xff0c;并抽取对应WQt图片存储至mi…

位运算(3)_判定字符是否唯一_面试题

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 位运算(3)_判定字符是否唯一_面试题 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目…

c++11~c++20 结构化绑定

结构化帮绑定可以作用于3中类型 一、原生数组类型 结果&#xff1a; 备注&#xff1a;绑定到原生数组所需条件仅仅是要求别名的数量于数组元素的个数一致&#xff0c;这里的x&#xff0c;y&#xff0c;z分别绑定到a[0],a[1],a[2] 二、绑定到结构体和类对象 结果&#xff1a;…

selenium测试框架快速搭建详解

一、介绍 Selenium目前主流的web自动化测试框架&#xff1b;支持多种编程语言Java、pythan、go、js等&#xff1b;selenium 提供一系列的api 供我们使用&#xff0c;因此在web测试时我们要点页面中的某一个按钮&#xff0c;那么我们只需要获取页面&#xff0c;然后根据id或者n…

JQuery基本介绍和使用方法

JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容⽹⻚结构⽹⻚样式 但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象. jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于20…

uniapp数据缓存

利用uniapp做开发时&#xff0c;缓存数据是及其重要的&#xff0c;下面是同步缓存和异步缓存的使用 同步缓存 在执行同步缓存时会阻塞其他代码的执行 ① uni.setStorageSync(key, data) 设置缓存&#xff0c;如&#xff1a; uni.setStorageSync(name, 张三) ② uni.getSt…

MyBatis的注入问题

对之前文章的补充&#xff1a;MyBatis中的#{}与${}注入问题----原文链接 前言&#xff1a; MyBatis是一个流行的Java持久层框架&#xff0c;用于将对象与数据库中的数据进行映射。然而&#xff0c;如果不当使用&#xff0c;MyBatis也可能受到诸如SQL注入这类的安全问题的影响。…

在传销案件中数据库取证的分步指南

金字塔计划的特点是分层结构&#xff0c;主要由招募新成员的机制驱动。取证部门调查这些方案时&#xff0c;往往依靠数据库记录来分析这种结构。这些记录详细描述了上级和下级之间的关系&#xff0c;使调查人员能够描绘出组织的动态。在本文中&#xff0c;我们将探讨如何利用数…

RuoYi-Vue实现后台管理系统去掉首页/默认跳转动态路由第一个路由

云风网 云风笔记 云风知识库 RuoYi-Vue 是一个 Java EE 企业级快速开发平台&#xff0c;基于SpringBoot、Spring Security、Jwt、Vue的前后端分离的后台管理系统 内置模块如&#xff1a;部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定…

Windows11系统下SkyWalking环境搭建教程

目录 前言SkyWalking简介SkyWalking下载Agent监控实现启动配置SkyWalking启动Java应用程序启动Elasticsearch安装总结 前言 本文为博主在项目环境搭建时记录的SkyWalking安装流程&#xff0c;希望对大家能够有所帮助&#xff0c;不足之处欢迎批评指正&#x1f91d;&#x1f91…

【YashanDB知识库】GBK库,生僻字插入nvarchar2字段后乱码问题

本文内容来自YashanDB官网&#xff0c;具体内容可见(https://www.yashandb.com/newsinfo/7488287.html?templateId1718516) 问题现象 如下SQL&#xff0c;插入的人名中有两个GBK生僻字“ ”和“ ”&#xff0c;GBK编码中没有这两个字符。 插入后&#xff0c;客户端utf8编码…

华为源NAT技术与目的NAT技术

1&#xff09;源NAT对报文源地址进行转换&#xff0c;分为NAT NO-PAT&#xff0c;NAPT,EASY-IP,三元组NAT&#xff1b; &#xff08;1&#xff09;NAT NO-PAT原理&#xff1a; no-port address translation:非端口地址转换&#xff1a;只转换地址&#xff0c;不转换端口&…

短视频剪辑工具有哪些?推荐4个简单好用的工具

短视频如今充斥着我们的生活&#xff0c;刷短视频已经成了很多人的生活必备。所以掌握短视频剪辑技能是一件很重要的事情&#xff0c;能够为视频创作者带来很多的流量。如果想要学习剪辑的话&#xff0c;可以先从选择一款合适的剪辑工具开始&#xff0c;这几款功能丰富的软件&a…