esbuild 极速的JavaScript构建打包工具

2024-04-25 07:52

本文主要是介绍esbuild 极速的JavaScript构建打包工具,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、esbuild 是使用go语言编写的一个前端构建工具

相对于nodeJs的构建工具如webpack。go语言是纯机器码,没有js的解释过程;go新开了一个进程多线程并行,而js是单线程串行化的,所以从开发语言层面来说就更快。当nodejs还在解析打包程序的js的时候,go已经在解析要构建的js了。

2、esbuild内置了部分的loader直接使用go语言编写,可以直接使用

相对于nodeJs的构建工具中相同功能的loader相比也更快。不同于webpack中loader都要配置添加。比如内置了对.js、.jsx、.ts、.tsx 、.css、.module.css 等的支持,其他文件类型则需要添加社区的loader或者手写插件进行处理,比如:less、sass、img、字体图标库等。
esbuild的生态还不完善,很多插件其实只是包装了开源的loader框架,本质上还是用的js实现的,而且很多社区提供的插件都存在各种问题,需要自己实现插件,比如对css进行浏览器兼容添加浏览器前缀等问题

3、esbuild的代码分割很鸡肋

代码分割可以减小了初始加载时的文件体积,加速页面加载时间;也能提高缓存利用率,节省带宽成本;多个小块的代码可以并行下载,提高整体加载效率。而esbuild的代码分割,只支持esm 格式,对浏览器版本有限制;能对动态 import 的内容或多入口同时用到的代码进行分割。无法做到像webpack一样将使用到的某个库单独打包出去。

4、esbuild不支持HMR,需要借助插件实现。

5、esbuild目前的应用

主要因为esbuild在代码分割、css处理、不支持HMR、没有提供AST能力(不能转换成兼容低版本浏览器代码)等问题,虽然它很快,但它不适合直接用于生产环境,而更适合作为一种偏底层的模块打包工具,需要在它的基础上二次封装。在其他的构建工具中,只是将esbuild应用于开发环境,从而有更快的开发体验,比如在vite中 ,开发环境下使用esbuild快速构建,而构建部署版本时则使用的是rollup;在umi/mfsu中,开发环境下使用esbuild-loader替代label,而构建部署版本时则还是使用的babel。

总的来说,esbuild具有极快的构建速度、可扩展性、支持多种格式、不需要设置各种 loader,配置简单等。但还有很多不足:

  • 社区生态很弱,跟 Webpack 和 Vite 完全不在一个量级
  • 插件之间兼容性问题很严重
  • 代码分割能力太弱,只能基于入口进行分割
  • 对目标浏览器版本有一定要求
  • 不支持 HMR
  • 为了保持结构的一致性,没有提供转化的 AST 的 API
  • 由于工具和插件还是采用 JavaScript 编写,存在解析速度相对较慢的可能性
  • 对于复杂场景,配置还是像 Webpack 一样复杂
  • 可以在简单项目或类库开发中使用
    总之,esbuild 不是像 Webpack 是一个大一统项目,提供完善的插件机制,而是在极度精简之后的打包工具,快才是它的追求目标。

文章内容只做学习记录,内容转自别的大佬博客,主要参考:

Esbuild深度调研:吹了三年,能上生产了吗?

这篇关于esbuild 极速的JavaScript构建打包工具的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

springboot集成easypoi导出word换行处理过程

《springboot集成easypoi导出word换行处理过程》SpringBoot集成Easypoi导出Word时,换行符n失效显示为空格,解决方法包括生成段落或替换模板中n为回车,同时需确... 目录项目场景问题描述解决方案第一种:生成段落的方式第二种:替换模板的情况,换行符替换成回车总结项目场景s

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案:通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

基于 Cursor 开发 Spring Boot 项目详细攻略

《基于Cursor开发SpringBoot项目详细攻略》Cursor是集成GPT4、Claude3.5等LLM的VSCode类AI编程工具,支持SpringBoot项目开发全流程,涵盖环境配... 目录cursor是什么?基于 Cursor 开发 Spring Boot 项目完整指南1. 环境准备2. 创建

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security?—— 核心思想二、如何在 Java 项目中使用?——

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。

java.sql.SQLTransientConnectionException连接超时异常原因及解决方案

《java.sql.SQLTransientConnectionException连接超时异常原因及解决方案》:本文主要介绍java.sql.SQLTransientConnectionExcep... 目录一、引言二、异常信息分析三、可能的原因3.1 连接池配置不合理3.2 数据库负载过高3.3 连接泄漏