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

news2024/11/24 7:55:53

什么是 esbuild？

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

为什么 esbuild 能这么快？

Golang 开发：
- Go 语言在 CPU 密集型任务中表现出色，而传统的 JavaScript 构建工具并不适合这类场景。
多核并行：
- Go 语言具有多线程运行能力，可以充分利用多核 CPU 的性能，将解析、编译和生成的工作并行化。
从零开始：
- esbuild 从一开始就注重性能优化，不依赖第三方库，使用一致的数据结构，避免了不必要的数据转换开销。
内存的有效利用：
- 在 JS 开发的传统打包工具当中一般会频繁地解析和传递抽象语法树( AST )数据，比如 字符串 -> TS -> JS -> 字符串，然后字符串 -> JS -> 旧的JS -> 字符串，然后字符串 -> JS -> minified JS -> 字符串，这其中会涉及复杂的编译工具链，比如 webpack -> babel -> terser，每次接触到新的工具链，都得重新解析 AST，导致大量的内存占用。

esbuild 仅触及整个JavaScript AST 3次：

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

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

为什么 esbuild 还没有一统江山？

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

缺乏 AST 操作能力：
- 无法对打包产物进行降级到 ES5 及以下，不支持低版本浏览器。
Code Splitting 功能还在计划中：
- 当前版本的 esbuild 还不支持代码分割。
没有 TypeScript 类型检测：
- 不像 Webpack 集成了 TypeScript 支持，esbuild 需要额外的配置才能支持 TypeScript。
默认不支持 Vue、Angular 等框架的代码文件格式：
- 需要通过插件来实现对这些框架的支持，增加了开发成本。

为什么要学习 esbuild？

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

依赖预构建：
- 作为 Bundle 工具，预构建第三方依赖，减少开发时的加载时间。
单文件编译：
- 作为 TypeScript 和 JSX 编译工具，支持现代 JavaScript 语法。
代码压缩：
- 作为压缩工具，优化最终的打包产物。

什么是 no-bundle？

ESM是JavaScript提出的官方标准化模块系统，不同于之前的CJS，AMD，CMD等等，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 主导性能优势的初衷背道而驰。

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