认识
一、认识
Esbuild 是由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以比传统工具快 10~100 倍。
Esbuild 为什么那么快？
-
使用
Golang开发: 构建逻辑代码直接被编译为原生机器码，而不用像 JS 一样先代码解析为字节码，然后转换为机器码，大大节省了程序运行时间。 -
多核并行: 内部打包算法充分利用多核
CPU优势，所有的步骤尽可能并行，这也是得益于Go当中多线程共享内存的优势。 -
从零造轮子: 几乎没有使用任何第三方库，所有逻辑自己编写，大到
AST解析，小到字符串的操作，保证极致的代码性能。 -
高效的内存利用:
Esbuild中从头到尾尽可能地复用一份AST节点数据，而不用像JS打包工具中频繁地解析和传递AST数据（如string -> TS -> JS -> string），造成内存的大量浪费。
二、特点
-
不支持降级到
ES5的代码。这意味着在低端浏览器代码会跑不起来。 -
不支持
const enum等语法。这意味着单独使用这些语法在esbuild中会直接抛错。 -
不提供操作打包产物的接口，像
Rollup中灵活处理打包产物的能力(如renderChunk钩子)在Esbuild当中完全没有。 -
不支持自定义
Code Splitting策略。传统的Webpack和Rollup都提供了自定义拆包策略的API，而Esbuild并未提4供，从而降级了拆包优化的灵活性。
三、问题
3.1 Vite、EsBuild、Rollup、Webpack 各自优势、特点?
Vite 是一个前端开发与构建工具。采用双引擎架构, 开发阶段使用 Esbuild + no-bundle 服务，生产环境用 Rollup 编译构建。Vite在开发阶段, Vite 项目的启动可以分为两步。第一步是依赖预构建,借助 Esbuild 超快的编译速度来做第三方库构建和 TS/JSX 语法编译, 第二步是 Dev Server 的启动, 基于浏览器原生 ESModule 的支持实现了 no-bundle 服务,实现开发阶段的 Dev Server, 进行模块的按需加载, 可以直接在浏览器中运行源码，无需事先打包。每一个文件请求进来都会经历一系列的编译流程，然后 Vite 会将编译结果响应给浏览器。Vite 生产环境借助 Rollup, 从 AST 解析的功能开始，完成代码的词法分析（tokenize）和语义分析（parse），实现模块依赖图和作用域链的搭建，并完成 Tree Shaking、循环依赖检测及 Bundle 代码生成
EsBuild 是基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以比传统工具快 10~100 倍, 可以将其他格式的模块转化为 EsModule
Rollup 是一款基于 ES Module 模块规范实现的 JavaScript 打包工具, 并且 Rollup 具有天然的 Tree Shaking 功能，可以分析出未使用到的模块并自动擦除。Rollup 可以直接处理 Es Modules , 对于 CommonJs 需要通过插件来转换。
Webpack: 同样作为前端开发与构建工具, 开发与生产环境打包逻辑相同, 从所有入口开始, 递归处理所有依赖, 会对所有模块进行打包操作。生成最终代码前, 根据模块中出现的特性依赖，补充相应运行时代码, 比如立即表达式 IIFE、Webpack runtime 运行时代码, 生成最终产物。Webpack 实现了一套自己的 CommonJS 规范, 在 Webpack 中, 每个模块都被包装在一个函数中, 这个函数接受一个对象, 这个对象有 exports、require、module 等属性, 通过这种方式实现了模块的隔离, 每个模块都有自己的作用域, 不会污染全局作用域。