速度革命:esbuild如何改变前端构建游戏 (1)

embedded/2024/11/24 14:55:20/
esbuild_0">什么是 esbuild

esbuild 是一款基于 Go 语言开发的 JavaScript 构建打包工具,以其卓越的性能著称。相比传统的构建工具(如 Webpack),esbuild 在打包速度上有着显著的优势,能够将打包速度提升 10 到 100 倍。这对于那些经常受到 Webpack 缓慢打包速度困扰的开发人员来说,无疑是一个巨大的福音。
在这里插入图片描述

esbuild__5">为什么 esbuild 能这么快?
  1. Golang 开发

    • Go 语言在 CPU 密集型任务中表现出色,而传统的 JavaScript 构建工具并不适合这类场景。
  2. 多核并行

    • Go 语言具有多线程运行能力,可以充分利用多核 CPU 的性能,将解析、编译和生成的工作并行化。
  3. 从零开始

    • esbuild 从一开始就注重性能优化,不依赖第三方库,使用一致的数据结构,避免了不必要的数据转换开销。
  4. 内存的有效利用

    • 在 JS 开发的传统打包工具当中一般会频繁地解析和传递抽象语法树( AST )数据,比如 字符串 -> TS -> JS -> 字符串,然后字符串 -> JS -> 旧的JS -> 字符串,然后字符串 -> JS -> minified JS -> 字符串,这其中会涉及复杂的编译工具链,比如 webpack -> babel -> terser,每次接触到新的工具链,都得重新解析 AST,导致大量的内存占用。

esbuild 仅触及整个JavaScript AST 3次:

  1. 进行词法分析,解析,作用域设置和声明符号的过程
  2. 绑定符号,最小化语法。比如:将 JSX / TS转换为 JS。
  3. AST生成JS,source map生成。

当 AST 数据在CPU缓存中仍然处于活跃状态时,会最大化AST数据的重用。
在这里插入图片描述

esbuild__28">为什么 esbuild 还没有一统江山?

尽管 esbuild 有许多优点,但它也存在一些明显的不足:

  • 缺乏 AST 操作能力

    • 无法对打包产物进行降级到 ES5 及以下,不支持低版本浏览器。
  • Code Splitting 功能还在计划中

    • 当前版本的 esbuild 还不支持代码分割。
  • 没有 TypeScript 类型检测

    • 不像 Webpack 集成了 TypeScript 支持,esbuild 需要额外的配置才能支持 TypeScript。
  • 默认不支持 Vue、Angular 等框架的代码文件格式

    • 需要通过插件来实现对这些框架的支持,增加了开发成本。
esbuild_44">为什么要学习 esbuild

esbuild 之所以受到关注,很大程度上是因为它在 Vite 中的应用。esbuild是组成Vite的两架马车之一。
在这里插入图片描述
Vite 是一个现代的前端构建工具,其核心理念是“快速启动”和“按需编译”。esbuild 是 Vite 的重要组成部分之一,主要负责以下几个方面:

  1. 依赖预构建

    • 作为 Bundle 工具,预构建第三方依赖,减少开发时的加载时间。
  2. 单文件编译

    • 作为 TypeScript 和 JSX 编译工具,支持现代 JavaScript 语法。
  3. 代码压缩

    • 作为压缩工具,优化最终的打包产物。
什么是 no-bundle?

ESMJavaScript提出的官方标准化模块系统,不同于之前的CJSAMDCMD等等,ESM提供了更原生以及更动态的模块加载方案,最重要的就是它是浏览器原生支持的,也就是说我们可以直接在浏览器中去执行import,动态引入我们需要的模块,而不是把所有模块打包在一起。

Vite 是一个提倡 no-bundle 的构建工具,相比于传统的 Webpack,能做到开发时的模块按需编译,而不用先打包完再加载。
在这里插入图片描述
在这里插入图片描述

什么是依赖预构建?

模块代码其实分为两部分,一部分是源代码,也就是业务代码,另一部分是第三方依赖的代码,即node_modules中的代码。所谓的no-bundle只是对于源代码而言,对于第三方依赖而言,我们基本不会去改变他,Vite 还是选择 bundle(打包),这个部分,就依赖于esbuild

但是关键点是,为什么在开发阶段我们要对第三方依赖进行预构建? 如果不进行预构建会怎么样?

首先 Vite 是基于浏览器原生 ES 模块规范实现的 Dev Server,不论是应用代码,还是第三方依赖的代码,理应符合 ESM 规范才能够正常运行。但是,我们没有办法控制第三方的打包规范。还有相当多的第三方库仍然没有 ES 版本的产物。

此外,ESM还有一个比较重要的问题——请求瀑布流问题。ESM的每个import都会触发一次新的文件请求,因此在依赖层级深涉及模块数量多的情况下,会触发很多个网络请求,巨大的请求量加上 Chrome 对同一个域名下只能同时支持 6个 HTTP 并发请求的限制,导致页面加载十分缓慢,与 Vite 主导性能优势的初衷背道而驰。

在进行依赖的预构建之后,这种第三方库的代码被打包成了一个文件,这样请求的数量会骤然减少,页面加载也快了许多

总结

esbuild 以其卓越的性能和高效的构建流程,成为现代前端开发的重要工具之一。虽然它还有一些不足,但随着社区的发展和技术的进步,这些问题正在逐步得到解决。Vite 作为 esbuild 的重要应用场景,展示了 esbuild 在实际项目中的巨大潜力。


http://www.ppmy.cn/embedded/140143.html

相关文章

「Qt Widget中文示例指南」如何为窗口实现流程布局?(一)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 本文将展示如何为不…

k8s-NetworkPolicy

NetworkPolicy 是k8s中的网络策略可以限制pod以及namespace之间的访问流量 演示一下名称空间之间基于端口的访问限制 官方对networkpolicy的介绍 官方网址: 网络策略 |Kubernetes (简体中文) 一:创建NetworkPolicy vim…

Django:从入门到精通

一、Django背景 Django是一个由Python编写的高级Web应用框架,以其简洁性、安全性和高效性而闻名。Django最初由Adrian Holovaty和Simon Willison于2003年开发,旨在简化Web应用的开发过程。作为一个开放源代码项目,Django迅速吸引了大量的开发…

万有引力定律和库仑定律:自然的对称诗篇

万有引力定律和库仑定律:自然的对称诗篇 在宇宙深邃的知识长河中,万有引力定律和库仑定律恰似两颗璀璨的明珠,闪耀着人类智慧与自然奥秘的光辉。 十七世纪,牛顿在对天体运行的深邃思索中,拨开重重迷雾,发现…

k8s篇之控制器类型以及各自的适用场景

1. k8s中控制器介绍 在 Kubernetes 中,控制器(Controller)是集群中用于管理资源的关键组件。 它们的核心作用是确保集群中的资源状态符合用户的期望,并在需要时自动进行调整。 Kubernetes 提供了多种不同类型的控制器,每种控制器都有其独特的功能和应用场景。 2. 常见的…

在Ubuntu系统中制作系统启动u盘

2024-11:用Ubuntu系统一段时间后,编程体验很好,命令行尤其好用。时间一长,考虑到Windows系统里面丰富的软件生态,还是颇为割舍不下,本来想着再买个主机,但是考虑到成本问题,还是给笔…

Linux|环境变量

目录 前言 Main参数—命令行参数 命令行解释器:bash 认识环境变量 环境变量的作用 环境变量命令行操作 代码获取环境变量的用法 环境变量表 环境变量的存放 前言 环境变量是一个系统预定义的全局参数,系统自己开辟空间,将它存在于所…

海洋通信船舶组网工业4G路由器应用

船舶是浩瀚海洋中探索与贸易的载体,更是船员们生活与工作的家园。为了在广阔的水域中搭建起稳定、高效的网络桥梁,工业4G路由器以卓越的通信组网能力,为船舶组网提供网络支持。 工业4G路由器以其强大的信号发射能力,确保船舶内部…