前端打包工具 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 执行机制

1. Parsing（解析）: 递归（深度优先后序遍历）的加载所有导入的模块，构建一个依赖关系图。每一个模块都只有一个 module record，这也保证了每一个模块只会被执行一次。

2. Instantiating（实例化）: 对于每个新加载的模块，都会创建一个模块实例，并使用该模块中 export 的内容的 内存地址 对 import 进行映射（导出的模块和导入的模块都指向同一段内存地址–实时绑定）。

3. Evaluating（求值）: 运行每个新加载模块的主体代码。

ESM 最核心的两个特点：

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