前端打包工具 Esbuild

JavaScript 社区中有很多程序的打包工具，如 Webpack、Rollup、Parcle 等，它们都是使用 JavaScript 开发，性能方面有很多不足。
而 Esbuild，采用 Go 语言开发，并且基于 ESM，运行速度得到了显著提高。

为什么选 vite?

什么是 ESM？

ESM: es 就是 ES 模块。具体工作原理参见官方解释：ES module 工作原理

Snowpack 是首次提出利用浏览器原生 ESM 能力的工具。开发过程中，Snowpack 为你的应用程序提供 unbundled server**。**每个文件只需要构建一次，就可以永久缓存。文件更改时，Snowpack 会重新构建该单个文件。在重新构建每次变更时没有任何的时间浪费，只需要在浏览器中进行 HMR 更新。

具体使用方式: 引入 JS 文件时，属性 type 的值写入为 module 即可: type="module"

<script src="test.js" type="module"><script>

ESM 执行机制

Parsing（解析）: 递归（深度优先后序遍历）的加载所有导入的模块，构建一个依赖关系图。每一个模块都只有一个 module record，这也保证了每一个模块只会被执行一次。
Instantiating（实例化）: 对于每个新加载的模块，都会创建一个模块实例，并使用该模块中 export 的内容的内存地址对 import 进行映射（导出的模块和导入的模块都指向同一段内存地址–实时绑定）。
Evaluating（求值）: 运行每个新加载模块的主体代码。

ESM 最核心的两个特点：

构建复杂度非常低，修改任何组件都只需做单文件编译（不需要重新构建和重新打包应用程序的整个 bundle），时间复杂度永远是 O(1)
借助 ESM 的能力，模块化交给浏览器端，不存在资源重复加载问题，如果不是涉及到 jsx 或者 typescript 语法，甚至可以不用编译直接运行

前端打包工具 Esbuild相关推荐

前端打包工具rollup、webpack、vite的区别
前端打包工具rollup.webpack.vite的区别文章目录前端打包工具rollup.webpack.vite的区别一.结论二.rollup 三.webpack 1. 核心概念 2. 重要 ...
vite（一）前端打包工具发展史
现如今前端打包工具最火的无疑是vite!但是vite也不是凭空产生的,而是踩着前人肩膀发展起来的.所以在学习vite之前,有必要了解前端打包工具发展史. 前端打包工具发展史分为哪些阶段? 每一次前端打 ...
前端打包工具webpack和Vite
我们见证了 webpack.Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验. 但当我们开始构建越来越大型的应用时,通常需要很长时间才能启动开发服务器,文件修改后的效 ...
前端打包工具Esbuild--模块化、ESM、esbuild-loader、
模块化编程在前端领域已非常普遍,应用程序中将各种功能细分成独立的模块(单独文件)进行开发.module bundler 将所有文件串联起来变成了必须. JavaScript 社区中有很多程序的打包工具 ...
Webpack前端打包工具
1.概述 Webpack 是一个前端资源的打包工具,它可以将js.image.css等资源当成一个模块进行打包. 中文官方网站:https://www.webpackjs.com/ 打包的作用: - ...
前端打包工具-webpack和rollup的区别
开门见山 2017年4月初,Facebook 将一个巨大的 pull 请求合并到了 React 主分支(master) 中,将其现有的构建流程替换为基于 Rollup ,这一举动促使一些人发很 ...
我知道的webpack前端打包工具（一）
这些天,毕业那点事,到现在终于能腾出空来了. 今天Eknow想总结的是自身所掌握的webpack知识以及对webpack的一些见解. 先来看一下github对webpack的相关介绍简单的来讲呢,就 ...
下一代前端打包工具-Parcel介绍
Parcel的特性快速打包 - 多核编译,以及文件系统缓存,即使在重新启动之后也能快速重新构建. 支持JS,CSS,HTML,文件资源等- 不需要安装任何插件. 在需要的时候自动使用Babel,Po ...
Duo js 一个非常酷的前端打包工具
Duo是下一个包管理生成工具,混合了当今最流行的Component,Browserify,Go等工具的功能与思想,让前端开发更加简单与方便. 本文参考duojs的官网安装首先直接从npm安装 np ...

前端打包工具 Esbuild

什么是 ESM？

ESM 执行机制

ESM 最核心的两个特点：

前端打包工具 Esbuild相关推荐

最新文章

热门文章