Esbuild深入研习+与vite的关联一：含义：Esbuild 是一个非常快的 JavaScript 绑定器（An e

一：含义：Esbuild 是一个非常快的 JavaScript 绑定器（An extremely fast JavaScript and CSS bundler and minifier）

二：架构优势(原理)

2.1：esbuild 是用 Go 语言写的，并且编译为 native code。

2.2：并行性被大量使用，打包大致分为三个阶段：解析、链接和代码生成。解析和代码生成是大部分工作，并且是完全可并行化的（链接在很大程度上是一个固有的串行任务）。

2.3：Esbuild 重写大多数转译工具之后，能够在多个编译阶段共用相似的 AST 结构，尽可能减少字符串到 AST 的结构转换，提升内存使用效率。

2.4：`即时编译（just-in-time compilation，缩写为 JIT）(JIT 编译器会在程序已经开始执行后运行，它实时地对代码（通常是字节码或是某种 VM 指令）进行编译。借助着主机 CPU 的原生指令集，编译过程通常比较快速)

测试()

作用

第三方库 Bundler Vite 中在开发阶段使用 Esbuild 来进行依赖的预打包，将所有用到的第三方依赖转成 ESM 格式 Bundle 产物，并且未来有用到生产环境的打算。

缺点

前言思考?

esbuild正在优化部分和一些不计划支持的功能

1：上述图片第三点：ESbuild 没有提供 AST 的操作能力-----------不能兼容一些低版本浏览器（ESbuild 只能将代码转成 es6）

2：打算优化的地方 Code splitting ，Css content type 。

Vite开发环境中的预构建、文件编译使用的是 ESbuild，而生产环境使用的是 Rollup。这是因为 ESbuild 一些针对构建应用的重要功能仍然还在持续开发中 —— 特别是代码分割和 CSS处理方面。就目前来说，Rollup 在应用打包方面, 更加成熟和灵活(vitejs.cn/guide/why.h…)

三：Build API 和 Transform API

四：插件 API集合(community-plugins)

(插件 API 只能用于 Build API，不能用于 Transform API)

五：vite与esbuild关联

5.1 vite启动服务流程

先初始化 http 与 websocket 服务，http 主要用于启动本地服务器，websocket 主要用于开发阶段热更新。

try {
        const server = await createServer({
            root,
            base: options.base,
            mode: options.mode,
            configFile: options.config,
            logLevel: options.logLevel,
            clearScreen: options.clearScreen,
            server: cleanOptions(options)
        });
        if (!server.httpServer) {
            throw new Error('HTTP server not available');
        }
        await server.listen();
    }

5.2 vite使用esbuild预构建

vite将代码分为 源码 和 依赖 两部分并且分别处理,所谓依赖便是应用使用的第三方包,一般存在于node_modules目录中,一个较大项目的依赖及其依赖的依赖,加起来可能达到上千个包这些代码可能远比我们源码代码量要大,这些依赖通常是不会改变的(除非你要进行本地依赖调试)所以无论是webpack或者vite在启动时都会编译后将其缓存下来。
区别是：vite会使用esbuild进行依赖编译和转换(commonjs包转为esm)而webpack则是使用acorn或者tsc进行编译,而esbuild是使用Go语言写的,其速度比使用js编写的acorn速度要快得多。

5.3流程串接

vite命令会触发调用createServer函数，在createServer函数中会调用optimizeDeps进行依赖预构建优化。在 optimizeDeps函数中会从入口开始扫描import语句，收集依赖列表deps。使用esbuild编译且转换deps中的所有依赖，Vite 会将预构建的依赖缓存到 node_modules/.vite，在该目录还保存了_metadata.json文件，描述记录了整个预构建的信息。使用 chokidar 包创建文件监听实例，并监听文件的修改、添加、删除等

下面这可以看出esbuild打包输出的代码格式是esm

5.4 浏览器去解析模块

1:创建AST
创建AST当使用ES Modules进行开发时，实际上以入口节点为根节点（如main.js）创建出一张依赖关系图。不同依赖项之间通过export\import语句来进行关联

2:生成 Module Record
浏览器无法直接使用文件本身，但是浏览器会解析这些文件，根据 import/export语句构成模块记录(Module Record)，每个模块文件对应生成一个Module Record，记录当前模块的信息

六：esbuild-react-start地址（github.com/Elliotclyde…）

简介：使用esbuild打包jsx编译成js 运行在浏览器上

Esbuild深入研习+与vite的关联