esbuild构建工具简介

天翼云开发者社区
• 阅读 97

本文分享自天翼云开发者社区《esbuild构建工具简介》,作者:陈****冬

esbuild 是什么 esbuild是采用go语言实现的新一代构建工具,其官方文档如下:esbuild.github.io/ 其速度是目前已知的构建工具中速度最快的,但是esbuild为什么快以及其在实际过程中会遇的问题,是本文分析的重点, 以下将围绕esbuild的运用机制,基本构成,项目使用等各个方面做一个简单的分析。

esbuild 为什么这么快 简单来说可以总结为2点

  1. go的语言优势: js的解释型语言的特质决定了在执行中需要不断的解释执行的过程,Go 语言编写的程序比 JavaScript 少了一个动态解释的过程;实际go代码执行时是开的多进程
  2. 代码实现上,esbuild使用比较克制,很多在webpack上使用插件实现的功能 如loader, minify等插件均使用的go实现的,在实际构建过程中,较少的插件,保证了结构的一致性(主要指ast处理,在webpack的处理中,需要对一个文件做ast处理,是webpack → 字符串 → ast → 字符串 → webpack 这样的一个过程,如果是多个babel 则有多个这样的过程,esbuild 在实现过程中将这些babel 直接写进了go代码中,所以保证了结构一致性。),提升了构建速度。

esbuild的基本构成 esbuild构建工具简介

esbuild的基本构成大约可以分为api,以及plugin两个部分。api可以分为transformApi,buildApi两部分组成,以下会对这两部分做简单的介绍,其中,配置部分主要是在构建过程中的一些配置项。

transformApi

transformApi可以理解成esbuild独立提供的工具函数库,可以在脱离文件系统下使用,并且相对于传统的js插件,速度更快,这使得esbuild能在其他的构建工具(如 vite,snowpack等)得到应用。同时,也有一些第三方的webpack插件(如esbuild-loader既是采用这个思路实现)。

buildApi buildApi和transformApi不同的是buildApi在使用过程中和文件系统是相绑定的,所以不能单独使用,只能在esbuild构建过程中使用,其中,这部分的功能包括bundle,format,全局变量,serve等。

plugin plugin提供的功能是和webpack的plugin相类似的,支持go代码和js代码。 如果分析开源代码,不难发现,很多功能都是把现有的第三方工具库做一个封装实现的,还是采用js的方式实现的。这种方式实际上是有一定的缺陷的,因为原本的esbuild是采用go语言实现,这个过程是很快的,然而在这个过程中使用js的话,会一定程度上导致原本的js构建速度变慢。

esbuild在实际工程化中的缺陷 1.自带的loader只支持固定的几种类型,缺少对vue,sass,less等相关的语法的支持,需要自行用js开发插件,虽然社区提供了相关的插件,但是由于都是采用js编写的,很多插件处理的源代码依然采用开源的loader处理,相关的解析逻辑依然是采用的第三方开源库,且均是采用js编写的,这种js编写的代码在解析上仍然存在执行慢的情况。 2.esbuild不支持热加载,在每一次编辑之后需要重新构建一次,针对这三个问题,官方给出了三种解决方案 1. 使用watch 监听文件变化,在每一次文件变化之后重新构建 2. 配置你的IDE在你每次保存代码时执行esbuild 3.用第一个本地服务来提供你的代码,在每次请求时都执行一次rebuild 针对这种重新构建的情况,如果打包速度快,是没有太大影响的,但是如果加入多种的插件可能会导致在开发过程中的build变慢,影响开发速度。 3.对非esm 类型的包不支持 split。 4.为了保持结构的一致性,没有提供转化的 ast 的 api。这点影响非常大,说白了无法通过babel-plugin来做相关的转换。

总结 1.可以看到 esbuild 在实际的开发上秉承着极速和克制的原则,在一些功能的支持上并没有特别的全,所以有一部分的功能需要专门的 js 插件来实现。 2.esbuild 没有提供专门的 ast 生成接口,导致做一些按需引入的功能上比较困难,如 babel-plugin-import 类似的功能。 3.热加载功能的缺失。 4.esbuild自带的 transform ,babel 等功能实际是可以独立出来的api,使用相关的 api 替代 webpack 相关的 plugin 也能获得不菲的收益 5.esbuild 不是像 webpack 一样的大一统项目,提供完善的插件机制,而是在极度精简之后的打包工具,快是 esbuild 追求目标

点赞
收藏
评论区
推荐文章
全栈混合云综合架构方案研究和落地
本文分享自天翼云开发者社区《》,作者:yn(一)业务背景随着云服务的便利性日益被市场接受,企业客户越来越倾向采用公有云服务补充其现有的企业内部部署的数据中心和私有云基础架构的不足。因此,混合云成为云服务市场的重要发展趋势。广义上讲,混合云的形态可以包括云与
Springfox与SpringDoc——swagger如何选择(SpringDoc入门)
本文分享自天翼云开发者社区@《》,作者:才开始学技术的小白0.引言之前写过一篇关于swagger(实际上是springfox)的使用指南(https://www.ctyun.cn/developer/article/371704742199365),涵盖了
PostgreSQL:psql 介绍
本文分享自天翼云开发者社区《》,作者:周平psql命令是与PostgreSQL服务器交互的客户端程序,要登录到数据库服务器,需要使用psql客户端工具或者第三方客户端工具如PostgreSQLforNavicat,pgAdmin,Visualizer等等。
HPC调度基础:slurm集群的部署
本文分享自天翼云开发者社区@《》,作者:才开始学技术的小白0.引言HPC(HighPerformanceComputing,以下简称HPC)是一个领域,试图在任何时间点和技术上对于相关技术、方法和应用等多种方面实现最大的计算能力;换而言之其目的就是求解一类
AF_XDP技术简介
本文分享自天翼云开发者社区@《》,作者:ln一.概述AFXDP是一项新增的,针对高性能数据包处理进行优化的地址族协议。本文档假设读者已经熟悉BPF和XDP。如果没有,可以参考开源Cilium项目在(http://cilium.readthedocs.io/
Nodejs 应用编译构建提速建议 | 京东云技术团队
前端构建的提速是一项比较复杂且细节的工程,目前产品上在持续跟踪构建慢的应用,努力优化编译速度,但前端本身拥有一个比较自由的技术环境,没有统一的构建工具与流程,另外语言本身的执行效率、单线程的构建也不好让编译机发挥其最大能力,所以目前全局的通用优化手段还是会比较局限,还是依赖项目自身的优化.希望大家一起努力共建美好的明天.
京东云开发者 京东云开发者
4个月前
《京东金融APP的鸿蒙之旅系列专题》鸿蒙工程化:Hvigor构建技术
作者:京东科技杨拓一、构建工具概述Hvigor构建工具是一款基于TypeScript实现的构建任务编排工具,专为提升构建和测试应用的效率而设计。它主要提供以下关键功能:1.任务管理机制:包括任务注册和编排,帮助开发者高效地管理和执行构建任务。2.工程模型管
PostgreSQL:内存结构
本文分享自天翼云开发者社区@《》,作者:我是小朋友在Postgresql中,内存大概被分为两块Localmemoryarea:为每一个backendprocess分配的内存Sharedmemoryarea:PostgreSQLserver所有的backgr
故障测试之模拟网络丢包
本文分享自天翼云开发者社区《》,作者:yn1、模拟网络丢包工具——TC(TrafficControl)TC(TrafficControl)是linux自带的模块,一般不需要安装,TC要求内核2.4.18以上。Linux操作系统中的流量控制器TC用于Linu
使用element-ui 的上传组件upload完成自定义上传到天翼云oss云服务器
本文分享自天翼云开发者社区@《》,作者:我是小朋友首先配置天翼云,如下操作1、要求在使用OOS之前,首先需要在www.ctyun.cn注册一个账号(Account)。创建AccessKeyId和AccessSecretKey。AccessKeyId和Acc
天翼云开发者社区
天翼云开发者社区
Lv1
天翼云是中国电信倾力打造的云服务品牌,致力于成为领先的云计算服务提供商。提供云主机、CDN、云电脑、大数据及AI等全线产品和场景化解决方案。
文章
777
粉丝
16
获赞
40