Vite 双引擎架构 —— Esbuild 概念篇

Vite 底层采用 双引擎架构，核心构建引擎是 Esbuild 和 Rollup，二者在开发和生产环境中分工协作，共同实现高性能构建。不可否认，作为 Vite 的双引擎之一，Esbuild 在很多关键的构建阶段(如依赖预编译、TS 语法转译、代码压缩)让 Vite 获得了相当优异的性能，是 Vite 高性能的得力助手。无论是在 Vite 的配置项还是源码实现中，都包含了不少 Esbuild 本身的基本概念和高阶用法。因此，要深入掌握 Vite，学习 Esbuild 必不可少。

本篇文章我将由 Esbuild 开始，讲解 Vite 强大的双引擎结构。强烈建议上手操作，读两三遍，不如上手写一遍 。《esbuild 中文文档》

🔍 一、为什么 Esbuild 的性能极高？

极速构建：

  • 性能碾压传统工具：基于 Go 语言编写，多进程并行处理，比 Webpack/Rollup 快 10-100 倍（10个 three.js 副本打包仅需 0.39秒 vs Webpack 的 41秒） 。
  • 无缓存仍高效：内置优化算法，无需依赖缓存即可实现秒级编译 。
     

开箱即用的支持：

  • 语言支持：原生处理 JS、TS、JSX、CSS（含 CSS Modules），无需额外配置 。
  • 模块化：无缝捆绑 ESM 和 CommonJS 模块，自动树摇（Tree Shaking） 。
     

多场景适配：

  • 浏览器环境：默认输出浏览器兼容代码，支持 --minify 压缩、--sourcemap 源码映射 。
  • Node 环境：通过 --platform=node 打包，剥离 TS 类型、转换 ESM→CommonJS 。

 🛠️ 二、 Esbuild 安装与使用

npm install esbuild  # 或 yarn add esbuild

1. 命令行调用

命令行方式调用也是最简单的使用方式。我们先来写一些示例代码，新建src/index.jsx文件，内容如下:

import Server from "react-dom/server";let Greet = () => <h1>祝所有高三的同学，金榜题名!</h1>;
console.log(Server.renderToString(<Greet />));

注意安装一下所需的依赖，在终端执行如下的命令:

npm install react react-dom

接着到package.json中添加build脚本:

 "scripts": {"build": "esbuild src/index.jsx --bundle --outfile=dist/out.js",},

现在，你可以在终端执行npm run build，可以发现如下的日志信息:

接着我们就可以看到dish目录中的打包产物

 

说明我们已经成功通过命令行完成了 Esbuild 打包！但命令行的使用方式不够灵活，只能传入一些简单的命令行参数，稍微复杂的场景就不适用了，所以一般情况下我们还是会用代码调用的方式。

2. 代码调用

Esbuild 对外暴露了一系列的 API，主要包括两类: Build API和Transform API，我们可以在 Nodejs 代码中通过调用这些 API 来使用 Esbuild 的各种功能。想要更全面的了解的，可以去访问文章开头的文档地址。

项目打包——Build API

Build API主要用来进行项目打包，包括build、buildSync和 serve三个方法。

A、build 方法：异步打包

功能：执行异步构建任务，返回 Promise 对象，支持插件和并行操作。

适用场景：生产环境打包、复杂构建流程（如代码分割、压缩）。

首先我们来试着在 Node.js 中使用build 方法。你可以在项目根目录新建build.js文件，内容如下:

import { build } from 'esbuild';async function runBuild() {// 异步方法，返回一个 Promiseconst result = await build({// ----  如下是一些常见的配置  --- // 当前项目根目录absWorkingDir: process.cwd(),// 入口文件列表，为一个数组entryPoints: ["./src/index.jsx"],// 打包产物目录outdir: "dist",// 是否需要打包，一般设为 truebundle: true,// 模块格式，包括`esm`、`commonjs`和`iife`format: "esm",// 需要排除打包的依赖列表external: [],// 是否开启自动拆包splitting: true,// 是否生成 SourceMap 文件sourcemap: true,// 是否生成打包的元信息文件metafile: true,// 是否进行代码压缩minify: false,// 是否开启 watch 模式，在 watch 模式下代码变动则会触发重新打包watch: false,// 是否将产物写入磁盘write: true,// Esbuild 内置了一系列的 loader，包括 base64、binary、css、dataurl、file、js(x)、ts(x)、text、json// 针对一些特殊的文件，调用不同的 loader 进行加载loader: {'.png': 'base64',}});console.log(result);
}runBuild();

随后，你在命令行执行node build.js，就能在控制台发现如下日志信息:

接着我们就可以看到dish目录中的打包产物和相应的 SourceMap 文件

 

B、buildSync 方法：同步打包 （不推荐）

功能：同步执行构建任务，立即返回结果，但阻塞主线程。

适用场景：小型项目、简单脚本或 CLI 工具。

一个简单的例子：

const result = esbuild.buildSync({entryPoints: ['app.js'],bundle: true,outfile: 'out.js',platform: 'node' // 指定 Node 环境
});if (result.errors.length > 0) {throw new Error('Build failed');
}

局限性：

  • 性能影响：阻塞主线程，可能导致界面卡顿
  • 插件限制：Rollup 等工具的 buildSync 不支持插件
  • 适用性：仅推荐在轻量任务中使用

难道就不能使用同步打包了吗？？          如果说有，其实也是有的

使用 build + await 实现伪同步：

async function runBuild() {await esbuild.build({ /* 配置 */ });
}

 

C、serve 方法：开发服务器

这个 API 有 3 个特点。

  1. 开启 serve 模式后，将在指定的端口和目录上搭建一个静态文件服务，这个服务器用原生 Go 语言实现，性能比 Nodejs 更高。

  2. 类似 webpack-dev-server，所有的产物文件都默认不会写到磁盘，而是放在内存中，通过请求服务来访问。

  3. 每次请求到来时，都会进行重新构建(rebuild)，永远返回新的产物。

下面，我们通过一个具体例子来感受一下。

// build.js
import { serve } from 'esbuild';function runBuild() {serve({port: 8000,servedir: './dist',onRequest: (args) => {if (args.path === '/') {args.path = '/index.html'}}},{absWorkingDir: process.cwd(),entryPoints: ["./src/index.jsx"],bundle: true,format: "esm",splitting: true,sourcemap: true,outdir: "dist",loader: {'.js': 'jsx','.png': 'file','.jpg': 'file'}}).then((server) => {console.log("HTTP Server starts at port", server.port);});
}runBuild();

1.运行构建命令

npm run build

2.启动服务器

node build.js

我们在浏览器访问http://localhost:8000/dist/index.js可以看到 Esbuild 服务器返回的编译产物如下所示：

后续每次在浏览器请求都会触发 Esbuild 重新构建，而每次重新构建都是一个增量构建的过程，耗时也会比首次构建少很多(一般能减少 70% 左右)。

Serve API 只适合在开发阶段使用，不适用于生产环境。

单文件转译——Transform API

功能：对单个字符串内容进行转换（如转译 TS/JSX），不访问文件系统，适用于非文件环境（如浏览器内联处理）或作为工具链一环。

与 Build API 类似，它也包含了同步和异步的两个方法，分别是transformSync和transform。

举例栗子：在项目根目录新建transform.js，

// transform.js
import { transform, transformSync } from 'esbuild';async function runTransform() {// 第一个参数是代码字符串，第二个参数为编译配置const content = await transform("const isNull = (str: string): boolean => str.length > 0;",{sourcemap: true,loader: "tsx",});console.log(content);
}runTransform();

终端输入：

node transform.js

接着你就会看见：

同样的步骤，传参：

// transform.js
import { transform, transformSync } from 'esbuild';async function runTransform(code = "const isNull = (str: string): boolean => str.length > 0;") {// 第一个参数是代码字符串，第二个参数为编译配置const content = await transform(code,{sourcemap: true,loader: "tsx",});console.log(content);
}const inputCode = process.argv[2];
runTransform(inputCode).catch(console.error);

终端输入：

node transform.js "const add = (a: number, b: number): number => a + b;"

打印出：

由于同步的 API 会使 Esbuild 丧失并发任务处理的优势（Build API的部分已经分析过），我同样也不推荐大家使用transformSync。出于性能考虑，Vite 的底层实现也是采用 transform这个异步的 API 进行 TS 及 JSX 的单文件转译的。

📊 三、总结

Esbuild的优势在于编译速度非常快，且拥有Go语言的优势，Go语言编写的程序比JavaScript少了一个动态解释的过程；在代码实现上，Esbuild使用比较克制，很多在Webpack上使用插件实现的功能如loader、minify等均使用Go实现。；劣势在于支持不完善，提供的功能很基础，对代码分割和css处理等支持较弱。

✅ 优势
  • 速度为王：Go 语言 + 并行处理 + 内置功能（减少 AST 转换链） 。
     
  • 轻量 API：提供 CLI、JS、Go 三种接口，配置简洁 。
     
  • 生产优化：默认支持 Tree Shaking、代码压缩、Source Map 。
❌ 局限性

1.生态插件较弱

  • 不支持 Vue/Sass/Less 等语法，需 JS 插件（性能下降） 。
  • 无热更新（HMR），依赖 --watch 或手动重启 。

2.高级功能缺失

  • 无 AST 操作接口，无法实现类 Babel 按需引入 。
  • 代码分割（Code Splitting）对非 ESM 包支持差 。
     

但是不可否认，它的作用和潜力，我相信 Esbuild 未来在持续迭代中， 生态完善后或颠覆前端构建范式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/news/908362.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

leetcode hot100 链表（二）

leetcode hot100 链表（二）

书接上回&#xff1a; leetcode hot100 链表&#xff08;一&#xff09;-CSDN博客 8.删除链表的倒数第N个结点 class Solution { public:ListNode* removeNthFromEnd(ListNode* head, int n) {ListNode* currhead;int len0;while(curr){currcurr->next;len;}int poslen-n…
阅读更多...
Compose Multiplatform 实现自定义的系统托盘，解决托盘乱码问题

Compose Multiplatform 实现自定义的系统托盘，解决托盘乱码问题

Compose Multiplatform是 JetBrains 开发的声明式 UI 框架&#xff0c;可让您为 Android、iOS、桌面和 Web 开发共享 UI。将 Compose Multiplatform 集成到您的 Kotlin Multiplatform 项目中&#xff0c;即可更快地交付您的应用和功能&#xff0c;而无需维护多个 UI 实现。 在…
阅读更多...
C++11 Move Constructors and Move Assignment Operators 从入门到精通

C++11 Move Constructors and Move Assignment Operators 从入门到精通

文章目录 一、引言二、基本概念2.1 右值引用&#xff08;Rvalue References&#xff09;2.2 移动语义&#xff08;Move Semantics&#xff09; 三、移动构造函数&#xff08;Move Constructors&#xff09;3.1 定义和语法3.2 示例代码3.3 使用场景 四、移动赋值运算符&#xff…
阅读更多...
Linux配置yum 时间同步服务 关闭防火墙 关闭ESlinux

Linux配置yum 时间同步服务 关闭防火墙 关闭ESlinux

1、配置yum 1.1、Could not resolve host: mirrorlist.centos.org; 未知的错误 https://blog.csdn.net/fansfi/article/details/146369946?fromshareblogdetail&sharetypeblogdetail&sharerId146369946&sharereferPC&sharesourceRockandrollman&sharefr…
阅读更多...
使用 uv 工具快速部署并管理 vLLM 推理环境

使用 uv 工具快速部署并管理 vLLM 推理环境

uv&#xff1a;现代 Python 项目管理的高效助手 uv&#xff1a;Rust 驱动的 Python 包管理新时代 在部署大语言模型&#xff08;LLM&#xff09;推理服务时&#xff0c;vLLM 是一个备受关注的方案&#xff0c;具备高吞吐、低延迟和对 OpenAI API 的良好兼容性。为了提高部署效…
阅读更多...
基于sqlite的任务锁（支持多进程/多线程）

基于sqlite的任务锁（支持多进程/多线程）

前言 介绍 任务锁，在多进程服务间控制耗时任务的锁，确保相同id的耗时任务同时只有一个在执行 依赖 SqliteOp，参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/137019125 实现方式 utils/taskLock.py import timefrom utils.SqliteOp import Sqli…
阅读更多...
html表格转换为markdown

html表格转换为markdown

文章目录 工具功能亮点1.核心实现解析1. 剪贴板交互2. HTML检测与提取3. 转换规则设计 2. 完整代码 在日常工作中&#xff0c;我们经常遇到需要将网页表格快速转换为Markdown格式的场景。无论是文档编写、知识整理还是数据迁移&#xff0c;手动转换既耗时又容易出错。本文将介绍…
阅读更多...
IDEA 中 Undo Commit，Revert Commit，Drop Commit区别

IDEA 中 Undo Commit，Revert Commit，Drop Commit区别

一、Undo Commit 适用情况&#xff1a;代码修改完了&#xff0c;已经Commit了&#xff0c;但是还未push&#xff0c;然后发现还有地方需要修改&#xff0c;但是又不想增加一个新的Commit记录。这时可以进行Undo Commit&#xff0c;修改后再重新Commit。如果已经进行了Push&…
阅读更多...
【Linux】Linux 进程间通讯-管道

【Linux】Linux 进程间通讯-管道

参考博客&#xff1a;https://blog.csdn.net/sjsjnsjnn/article/details/125864580 一、进程间通讯介绍 1.1 进程间通讯的概念 进程通信&#xff08;Interprocess communication&#xff09;&#xff0c;简称&#xff1a;IPC 本来进程之间是相互独立的。但是由于不同的进程…
阅读更多...
深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…
阅读更多...
第34次CCF-CSP认证真题解析（目标300分做法）

第34次CCF-CSP认证真题解析（目标300分做法）

第34次CCF-CSP认证 矩阵重塑&#xff08;其一&#xff09;AC代码及解析矩阵重塑&#xff08;其二&#xff09;AC代码及解析货物调度AC代码及解析 矩阵重塑&#xff08;其一&#xff09; 输入输出及样例&#xff1a; AC代码及解析 1.线性化原矩阵 &#xff1a;由于cin的特性我们…
阅读更多...
智能制造数字孪生全要素交付一张网：智造中枢，孪生领航，共建智造生态共同体

智能制造数字孪生全要素交付一张网：智造中枢，孪生领航，共建智造生态共同体

在制造业转型升级的浪潮中&#xff0c;数字孪生技术正成为推动行业变革的核心引擎。从特斯拉通过数字孪生体实现车辆全生命周期优化&#xff0c;到海尔卡奥斯工业互联网平台赋能千行百业&#xff0c;数字孪生技术已从概念验证走向规模化落地。通过构建覆盖全国的交付网络&#…
阅读更多...
【技术】跨设备链路聚合的技术——M-LAG

【技术】跨设备链路聚合的技术——M-LAG

原创&#xff1a;厦门微思网络 M-LAG&#xff08;Multichassis Link Aggregation Group&#xff09;提供一种跨设备链路聚合的技术。M-LAG通过将两台接入交换机以同一个状态和用户侧设备或服务器进行跨设备的链路聚合&#xff0c;把链路的可靠性从单板级提升到设备级。同时&…
阅读更多...
AI健康小屋+微高压氧舱：科技如何重构我们的健康防线？

AI健康小屋+微高压氧舱：科技如何重构我们的健康防线？

目前&#xff0c;随着科技和社会的不断发展&#xff0c;人们的生活水平和方式有了翻天覆地的变化。 从吃饱穿暖到吃好喝好再到健康生活&#xff0c;观念也在逐渐发生改变。 尤其是在21世纪&#xff0c;大家对健康越来越重视&#xff0c;这就不得不提AI健康小屋和氧舱。 一、A…
阅读更多...
Python训练营---Day44

Python训练营---Day44

DAY 44 预训练模型 知识点回顾&#xff1a; 预训练的概念常见的分类预训练模型图像预训练模型的发展史预训练的策略预训练代码实战&#xff1a;resnet18 作业&#xff1a; 尝试在cifar10对比如下其他的预训练模型&#xff0c;观察差异&#xff0c;尽可能和他人选择的不同尝试通…
阅读更多...
1.文件操作相关的库

1.文件操作相关的库

一、filesystem(C17) 和 fstream 1.std::filesystem::path - cppreference.cn - C参考手册 std::filesystem::path 表示路径 构造函数&#xff1a; path( string_type&& source, format fmt auto_format ); 可以用string进行构造&#xff0c;也可以用string进行隐式类…
阅读更多...
【 java 集合知识 第二篇 】

【 java 集合知识 第二篇 】

目录 1.Map集合 1.1.快速遍历Map 1.2.HashMap实现原理 1.3.HashMap的扩容机制 1.4.HashMap在多线程下的问题 1.5.解决哈希冲突的方法 1.6.HashMap的put过程 1.7.HashMap的key使用什么类型 1.8.HashMapkey可以为null的原因 1.9.HashMap为什么不采用平衡二叉树 1.10.Hash…
阅读更多...
【Dify 知识库 API】“根据文本更新文档” 真的是差异更新吗？一文讲透真实机制！

【Dify 知识库 API】“根据文本更新文档” 真的是差异更新吗？一文讲透真实机制！

在使用 Dify 知识库 API 过程中，很多开发者在调用 /datasets/{dataset_id}/document/update-by-text 接口时，常常会产生一个疑问： 👉 这个接口到底是 “智能差异更新” 还是 “纯覆盖更新”？ 网上的资料并不多，很多人根据接口名误以为是增量更新。今天我结合官方源码 …
阅读更多...
大模型如何革新用户价值、内容匹配与ROI预估

大模型如何革新用户价值、内容匹配与ROI预估

写在前面 在数字营销的战场上，理解用户、精准触达、高效转化是永恒的追求。传统方法依赖结构化数据和机器学习模型，在用户价值评估、人群素材匹配以及策略ROI预估等核心问题上取得了显著成就。然而，随着数据维度日益复杂，用户行为愈发多变，传统方法也面临着特征工程繁琐、…
阅读更多...
基于端到端深度学习模型的语音控制人机交互系统

基于端到端深度学习模型的语音控制人机交互系统

基于端到端深度学习模型的语音控制人机交互系统 摘要 本文设计并实现了一个基于端到端深度学习模型的人机交互系统，通过语音指令控制其他设备的程序运行，并将程序运行结果通过语音合成方式反馈给用户。系统采用Python语言开发，使用PyTorch框架实现端到端的语音识别（ASR）…
阅读更多...
最新文章

Copyright @ 2022~2023