腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

前端打包工具Esbuild--模块化、ESM、esbuild-loader、

下面要介绍的 Esbuild，采用 Go 语言开发，运行速度得到了显著提高。 Esbuild 也被称为下一代构建工具（使用 Go 语言编写，基于 ESM）。 esbuild-loader 是一个构建在 esbuild 上的 webpack loader，且可以替代 babel-loader 或 ts-loader 来提高构建速度。）暂时不能过渡到 esbuild 中。总结在当前前端环境中，直接使用 esbuild 代替 webpack 不现实；主流方案是在 webpack 中使用 esbuild 去做一些代码的 transform (代替 babel-loader 最后通过 ESM 构建，提到 esbuild，还有一个 swc；esbuild 采用 go 语言编写，而 swc 采用 rust 语言编写。

2021-08-31

4.7K0

标签:

Esbuild 为什么那么快

Esbuild 是什么 Esbuild 是一个非常新的模块打包工具，它提供了与 Webpack、Rollup、Parcel 等工具「相似」的资源打包能力，却有着高的离谱的性能优势：从上到下，耗时逐步上升达到数百倍的差异，这个巨大的性能优势使得 Esbuild 在一众基于 Node 的构建工具中迅速蹿红，特别是 Vite 2.0 宣布使用 Esbuild 预构建依赖后，前端社区关于它的讨论热度迅速上升。这种语言层面的差异在打包场景下特别突出，说的夸张一点，JavaScript 运行时还在解释代码的时候，Esbuild 已经在解析用户代码；JavaScript 运行时解释完代码刚准备启动的时候，Esbuild 总结单纯从编译性能的维度看，Esbuild 确实完胜世面上所有打包框架，差距甚至能在百倍之大：耗时性能差异速度产物大小 Esbuild 0.11s 1x 1198.5 kloc/s 0.97mb 总的来说，Esbuild 提供了一种新的设计思路，值得学习了解，但对大多数业务场景还不适合直接投入生产使用。

2021-12-09

1.5K0

标签:

极速 JavaScript 打包器：esbuild

在本文中，我们将深入了解esbuild，并探讨其如何实现如此出色的性能。什么是esbuild？支持多种模块格式esbuild支持多种模块格式，包括CommonJS、ES6模块、AMD和UMD等。这使得开发人员可以轻松地将现有代码库迁移到esbuild中。4. esbuild如何实现如此出色的性能？1. Go语言esbuild使用Go语言编写，这使得它比其他JavaScript打包器更快。 esbuild缺点尽管esbuild具有许多优点，但它也有一些缺点。 esbuild时，需要指定入口文件。

2023-11-16

8750

标签:

2023腾讯·技术创作特训营第三期

「不懂就问」esbuild 为什么这么快?

esbuild以速度快而著称，耗时只有 webpack 的 2% ～3%。 esbuild 项目主要目标是: 开辟一个构建工具性能的新时代，创建一个易用的现代打包器。今天我们就来探索一下: 为什么 esbuild 这么快下文的主要内容：几组性能数据对比为什么 esbuild 这么快 esbuild upcoming roadmap esbuild 在 vite esbuild 仅耗时 0.37 秒。差异巨大。 esbuild 在 vite 中的运用 vite 中大量使用了 esbuild, 这里简单分享两点。为何 vite 不用 esbuild 打包？

2021-06-08

1.7K0

标签:

「不懂就问」esbuild 为什么这么快?

esbuild以速度快而著称，耗时只有 webpack 的 2% ～3%。 esbuild 项目主要目标是: 开辟一个构建工具性能的新时代，创建一个易用的现代打包器。下文的主要内容：几组性能数据对比为什么 esbuild 这么快 esbuild upcoming roadmap esbuild 在 vite 中的运用为什么生产环境仍需打包? esbuild 仅耗时 0.37 秒。差异巨大。 esbuild 在 vite 中的运用 vite 中大量使用了 esbuild, 这里简单分享两点。为何 vite 不用 esbuild 打包？

2021-08-24

1K0

标签:

使用 esbuild 为你的构建提速

前端遇到了什么瓶颈 & esbuild 能解决什么问题性能优先的设计哲学 & 与其它工具合作共赢 esbuild 官方的定位畅想 esbuild 的未来 1. 前端遇到了什么瓶颈 & esbuild 能解决什么问题前端工程化的瓶颈 JS 之外的构建工具 esbuild 解决的问题社区插件集 2. /cmd/esbuild 与其它工具合作共赢使用 Golang 与 Node.js 调用 esbuild 的示例（esbuild 作为其它工具流程的一部分）： 3. esbuild 官方的定位 esbuild 接入方式通过 esbuild-loader 接入直接调用 esbuild 二进制 Umi 自带启用 esbuild 功能两点结论：需要根据自己项目的情况来决定使用哪种方式来接入优化效果因项目而异，因为构建速度不完全取决于 esbuild。 4. 畅想 esbuild 的未来结语 esbuild 是一个强大的工具，希望大家能充分使用起来，为业务带来更大价值。

2022-03-30

2.2K0

标签:

Vite 学习（三） - rollup & esbuild 基础学习

本小节介绍下 rollup 和 esbuild 的基础用法，我们都知道 vite 本身使用的 rollup 打包，vite 的插件也和 rollup 的插件机制相吻合； esbuild 是用于在开发环境中对文件进行处理 esbuild，他是 go 语言写的，完全命令行使用，能够解析 js ，但是不能运行 js。我们需要了解 esbuild 的插件执行机制，我们在编写 vite 插件的时候，如果写自己插件有需要的话，也要同时兼容 rollup 和 esbuild 使用 npx esbuild index.js /logo.png' --loader:.png=dataurl // 转成了 base64 esbuild 插件在 esbuild 中，插件被设计为一个函数，该函数需要返回一个对象（Object） onLoad 的回调函数 onLoad 函数的回调函数会在 esbuild 解析模块之前调用，主要是用于处理并返回模块的内容，并告知 esbuild 要如何解析它们。

2022-02-13

3.1K0

标签:

前端构建新世代，Esbuild 原来还能这么玩！

什么是 Esbuild? SWC 比 Esbuild 略快的场景。性能是差不多的，但 Esbuild 兼容性远远不及 SWC。 Esbuild 的插件机制。详见 132 的分享 esbuild 上生产。 7.

2022-01-07

2.7K0

标签:

如何用 esbuild 替换 Create React App 中的 Webpack

安装esbuild npm i -D esbuild 在package.json中更新构建脚本 // package.json "scripts": { "start": "react-scripts esbuild默认不处理这种类型的文件。为了支持这些类型的文件，esbuild提供了插件支持。你可以在这里[5]找到社区esbuild插件的列表。 npm i -D esbuild-plugin-inline-image 为了加载新的插件，我们需要改变我们的构建命令，来使用esbuild的JavaScript API。 // build.js const esbuild = require("esbuild"); const inlineImage = require("esbuild-plugin-inline-image 添加serve.js来自动重新构建 // serve.js const esbuild = require("esbuild"); const inlineImage = require("esbuild-plugin-inline-image

2022-08-19

4.1K0

标签:

使用 esbuild 来打包一个 React 库

webpack 项目用 esbuild 可以分钟级运行。本文将记录使用 esbuild 来打包一个 React 库。 /esbuild.js文件写入打包配置 const esbuild = require('esbuild'); esbuild .build({ entryPoints: [ /example/esbuild.js 文件，代码如下： const esbuild = require("esbuild"); const path = require("path"); esbuild esbuild 没有提供 AST 的操作能力 (如 babel-plugin-import) esbuild 的优点 esbuild 除了打包速度飞快，对于ts、css 文件的处理也是非常友好，不需要设置各种

狂奔滴小马

2022-01-20

1.9K0

标签: