我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vite使用Esbuild提升性能详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vite使用Esbuild提升性能详解

前言

在上一篇 为什么有人说 vite 快,有人却说 vite 慢? 中,我们提到过开发模式下使用 Vite 会有首屏性能下降的负面效果。之所以会造成首屏性能下降,一方面是 dev server 需要完成预构建才可以响应首屏请求;另一方面是需要对请求文件做实时转换。

也许有的同学会问,是不是针对这两个方面做优化,就可以提升首屏性能呢?原则上这样是没有问题的,而且 Vite 也是这么做的。为了能提升性能,Vite 另辟蹊径的借助了 Esbuild 能快速完成项目打包、文件转换的能力来进行预构建、内容转换,效果非常好。

今天小编就通过本文和大家一起聊一聊 Vite 是怎样利用 Esbuild 来提升性能的。

初探 Esbuild

首先,小编先带大家简单了解一下 Esbuild,其官方地址是: Esbuild。

什么是 Esbuild

Esbuild 是一款基于 Go 语言开发的 javascript 打包工具,最大的一个特征就是快。

通过官网提供的一张图,我们可以清晰的看到 Esbuild 的表现是多么优秀:

同样规模的项目,使用 Esbuild 可以将打包速度提升 10 - 100 倍,这对广大一直饱受 Webpack 缓慢打包速度折磨的开发人员来说,简直就是福音。

Esbuild 之所以能这么快,主要原因有两个:

  • Go 语言开发,可以多线程打包,代码直接编译成机器码;
  • Webpack 一直被人诟病构建速度慢,主要原因是在打包构建过程中,存在大量的 resolveloadtransformparse 操作(详见 为什么有人说 vite 快,有人却说 vite 慢?- 快速的冷启动 ),而这些操作通常是通过 javascript 代码来执行的。要知道,javascript 并不是什么高效的语言,在执行过程中要先编译后执行,还是单线程并且不能利用多核 cpu 优势,和 Go 语言相比,效率很低。
  • 可充分利用多核 cpu 优势;

关键 API - transfrom & build

Esbuild 并不复杂。它对外提供了两个 API - transformbuild,使用起来非常简单。

transfrom,转换的意思。通过这个 api,我们可以将 tsjsxtsx 等格式的内容转化为 jstransfrom 只负责文件内容转换,并不会生成一个新的文件。

build,构建的意思,根据指定的单个或者多个入口,分析依赖,并使用 loader 将不同格式的内容转化为 js 内容,生成一个或多个 bundle 文件。

这两个 API 的使用方式:

const res = await esbuild.transform(code, options) // 将 code 转换为指定格式的内容
esbuild.build(options) // 打包构建

关于使用 transformbuild 需要传入的具体配置项,本文就不详细说明了,官网对这一块儿有很详细的说明,感兴趣的同学可以去官网 - simple-options、Advanced options 看看,也可以自己动手试试。

plugin

WebpackRollup 等构建工具一样,Esbuild 也提供了供外部使用的 plugin,使得我们可以介入构建打包过程。

在这里要说明一点,只有 build 这个 API 的入参中可以配置 plugintransform 不可以。

一个标准的 plugin 的标准格式如下:

let customerPlugin = {
    name: 'xxx',
    setup: (build) => {
        build.onResolve({ filter: '', namespace: '' }, args => { ...});
        build.onLoad({ filter: '', namespace: ''}, args => { ... });
        build.onStart(() => { ... });
        build.onEnd((result) => { ... });
    }
}

其中,setup 可以帮助我们在 build 的各个过程中注册 hook

Esbuild 对外提供的 hook 比较简单,总共 4 个:

  • onResolve, 解析 url 时触发,可自定义 url 如何解析。如果 callback 有返回 path,后面的同类型 callback 将不会执行。所有的 onResolve callback 将按照对应的 plugin 注册的顺序执行。
  • onLoad, 加载模块时触发,可自定义模块如何加载。 如果 callback 有返回 contents,后面的同类型 callback 将不会执行。所有的 onLoad callback 将按照对应的 plugin 注册的顺序执行。
  • onStart, 每次 build 开始时都会触发,没有入参,因此不具有改变 build 的能力。多个 pluginonStart 并行执行。
  • onEnd, 每次 build 结束时会触发,入参为 build 的结果,可对 result 做修改。所有的的 onEnd 将按照对应的 plugin 注册的顺序执行。

正是有了 onResolveonLoadonStartonEnd,我们可以在 build 过程中的解析 url、加载模块内容、构建开始、构建结束阶段介入,做自定义操作。

Esbuild 在 Vite 中的巧妙使用

了解了 Esbuild 的基本用法以后,小编就带大家一起来看看 Vite 是怎么利用 Esbuild 来做预构建和内容转换的。

预构建

先来回顾一下为什么要做预构建。

原因有两点:

  • 将非 ESM 规范的代码转换为符合 ESM 规范的代码;
  • 将第三方依赖内部的多个文件合并为一个,减少 http 请求数量;

要完成预构建,最关键的两点是找到项目中所有的第三份依赖和对第三方依赖做合并、转换。借助 EsbuildVite 很轻松的实现了这两个诉求。

寻找第三方依赖

寻找第三方依赖的过程非常简单,分为两步:

定义一个带 onResolve hookonLoad hookesbuild plugin

执行 esbuildbuild 方法做打包构建;

WebpackRollupParcel 等构建工具一样,Esbuild 在做打包构建时也要构建模块依赖图 - module graph(具体过程可参考 为什么有人说 vite 快,有人却说 vite 慢?- 快速的冷启动 中 Webpack 构建 module graph)。

在构建 module graph 时,第一步就是解析模块的绝对路径,这个时候就会触发 onResolve hook。在 onResolve hook 触发时,会传入模块的路径。根据模块的路径,我们就可以判断出这个模块是第三方依赖还是业务代码。

举个 ?,

// main.tsx
import react from 'react';
import CustomeComponent from './components/CustomeComponent';
...

在对 main.tsx 的内容做 parser 操作时,能知道 main.tsx 依赖 reactCustomeComponent,然后开始解析 reactCustomeComponent

解析 reactCustomeComponent 时,会触发 onResolve hook,入参分别为 'react' 和 './components/CustomeComponent'。

根据入参,我们可以很清楚的区分 'react' 是第三方依赖,'./components/CustomeComponet' 是业务代码。

这样,esbuild 完成构建,项目中的第三方依赖也就收集完毕了。所有的第三方依赖会收集到一个 deps 列表中。

  • 合并、转换第三方依赖
  • 知道了项目中的第三方依赖以后,再做合并、转换操作就非常简单了。
  • 这一步, Vite 直接通过 esbuild 提供的 build 方法,指定 entryPoints 为收集到的第三方依赖,formatesm,再做一次打包构建。
  • 这一次,会对第三方依赖做合并、转换操作。打包构建完成以后,再把构建内容输出到 /node_modules/.vite/deps 下。

这样,通过两次 esbuild.build,预构建就完成了。

middlewares 中内容转换

Vite 中源文件的转换是在 dev server 启动以后通过 middlewares 实现的。

当浏览器发起请求以后,dev sever 会通过相应的 middlewares 对请求做处理,然后将处理以后的内容返回给浏览器。

middlewares 对源文件的处理,分为 resolveloadtransformparser 四个过程:

  • resolve - 解析 url,找到源文件的绝对路径;
  • load - 加载源文件。如果是第三方依赖,直接将预构建内容返回给浏览器;如果是业务代码,继续 transformparser
  • transfrom - 对源文件内容做转换,即 ts -> js, less -> css 等。转换完成的内容可以直接返回给浏览器了。
  • parser - 对转换以后的内容做分析,找到依赖模块,对依赖模块做预转换 - pre transform 操作,即重复 1 - 4
  • pre transformVite 做的一个优化点。预转换的内容会先做缓存,等浏览器发起请求以后,如果已经完成转换,直接将缓存的内容返回给浏览器。

Vite 在处理步骤 3 时,是通过 esbuild.transform 实现的,对比 Webpack 使用各个 loader 处理源文件,那是非常简单、快捷的。

结束语

有一说一,Vite 通过 Esbuild 来优化预构建和内容转换的思路非常棒,这给我们以后处理同类问题提供了解决方案,真心给尤大点 ??。

另外除了使用 EsbuildVite 内部还有很多可以拿出来单独讲的优化技巧,这个以后有机会小编可以再给大家详细讲讲。

以上就是Vite使用Esbuild提升性能详解的详细内容,更多关于Vite Esbuild性能提升的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vite使用Esbuild提升性能详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vite使用Esbuild提升性能详解

这篇文章主要为大家介绍了Vite使用Esbuild提升性能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

Vite 是怎样利用 Esbuild 来提升性能的 ?

今天小编就通过本文和大家一起聊一聊 Vite 是怎样利用 Esbuild 来提升性能的。

SpringBoot中使用Cache提升接口性能详解

Spring 框架从 3.1 开始,对 Spring 应用程序提供了透明式添加缓存的支持。和事务支持一样,抽象缓存允许一致地使用各种缓存解决方案,并对代码的影响最小。

Webpack 性能之使用 Cache 提升构建性能

经过这么多年发展,Webpack 生态在前端工程化能力方面已经发展的非常全面且强大,但大而全的背后其运行性能却逐渐为行业诟病,后进如 Vite、SnowPack 等以性能著称的同类框架更是在业内掀起不小波澜。

使用JMH提升Java程序的性能

Java Microbenchmark Harness(JMH)是Java开发人员的重要工具。本篇文章中,我们将演示如何使用JMH来创建和运行基准测试,最终提升你的Java应用程序性能。
JMHJava程序2024-11-30

怎么使用OPCache提升PHP的性能

这篇文章给大家分享的是有关怎么使用OPCache提升PHP的性能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。PHP开发环境搭建工具有哪些一、phpStudy,是一个新手入门最常用的开发环境。二、WampServ
2023-06-14

使用PhpFastCache提升您的网站性能

在本文中,我们将探索PhpFastCache库,该库使您可以在PHP应用程序中实现缓存。 因此,它有助于改善整体网站性能和页面加载时间。
2023-03-17

如何使用C++的StringBuilder提升性能

今天就跟大家聊聊有关如何使用C++的StringBuilder提升性能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。介绍经常出现客户端打电话抱怨说:你们的程序慢如蜗牛。你开始检查可能
2023-06-17

详解redis大幅性能提升之使用管道(PipeLine)和批量(Batch)操作

前段时间在做用户画像的时候,遇到了这样的一个问题,记录某一个商品的用户购买群,刚好这种需求就可以用到Redis中的Set,key作为productID,value就是具体的customerid集合,后续的话,我就可以通过productid来
2022-06-04

使用手工特征提升模型性能

本文将使用信用违约数据集介绍手工特征的概念和创建过程。

使用 VUE 组件提升应用程序性能

使用 VUE 组件可以有效地提升应用程序性能,通过将应用程序分解为更小的模块化部分,可以实现代码的可重用性、可维护性和可测试性。
使用 VUE 组件提升应用程序性能
2024-02-28

提升Flask应用性能的方法:使用Gunicorn

Gunicorn如何提高Flask应用的性能?随着互联网的快速发展,Web应用程序的性能对于用户体验和企业竞争力变得越来越重要。在处理高并发请求时,Flask框架默认的开发服务器往往无法满足需求。因此,我们需要使用Gunicorn(Gre
提升Flask应用性能的方法:使用Gunicorn
2024-01-17

Redis性能大幅提升之Batch批量读写详解

前言 本文主要介绍的是关于Redis性能提升之Batch批量读写的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 提示:本文针对的是StackExchange.Redis 一、问题呈现 前段时间在开发的时候,遇到了redis批量读
2022-06-04

如何使用Go Echo框架提升API性能

echo 框架提升 api 性能技巧:使用中间件缓存响应以提高响应速度。优化数据库查询以减少瓶颈,包括使用批量插入和池化连接。使用 gzip 压缩以减小响应大小。并行处理以在协程中安全地处理多个请求。通过实施这些优化,一家在线零售商将订单处
如何使用Go Echo框架提升API性能
2024-05-07

如何使用智能SQL查询提升应用程序性能?

我们常常忘了每个请求与其他请求并非独立。如果一个请求很慢,它不太可能影响其他请求,是这样吗?

编程热搜

目录