大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

今天给大家带来的主题是 bundlejs，一个基于 esbuild 优秀在线打包器和包大小检查器，希望大家真正用的上，话不多说，直接进入正题。

1.什么是 bundlejs

bundlejs（发音为 bundle js）是一种快速简便的方法来对 typescript、javascript、jsx 和 npm 项目进行 tree shaking、打包、minify 和 compress（在 gzip 或 brotli 中），同时可以查看总包的文件大小。bundlejs 是一个类似于 bundlephobia 的在线工具，不同的是 bundlejs 是在终端浏览器本地完成打包。

bundlejs 旨在通过遵循打包器使用的相同方法来生成更准确的包大小估计：

• 在本地进行所有打包
• 输出 tree shaking 打包代码，无需安装任何 npm 包和 typescript 支持。
• 获取生成的包大小

使用 bundlejs 的好处是：

• 更容易调试错误
• 可以验证生成的打包代码
• 配置打包能力，支持 tree shaking 打包代码，同时进行最终 bundle 的可视化分析
• 可以支持离线打包，只要之前使用过该模块
• 支持来自不同内容交付网络 (CDN) 的不同类型的模块，例如：CDN 范围从 deno 模块到 npm 模块，再到随机的 github 脚本等等

目前 bundlejs 在 Github 上通过 MIT 协议开源，有超过 600+的 star，是一个值得长期关注的前端开源项目。

2.bundlejs 支持打包 Treeshaking 和代码压缩

bundlejs 内部依赖 esbuild 来实现打包、转换、转译、压缩、tree shaking 和遍历文件的能力。 更加具体的来说，bundlejs 使用 esbuild-wasm，它能够访问这些功能的一个子集，关键限制主要包括：

• npm 只在 Node.js 运行，所以 bundlejs 没有 package.json 或 npm install（ StackBlitz WebContainers 除外）
• 浏览器不像 nodejs 那样工作，没有访问文件系统的简单方法和能力，因此存储和访问文件是不切实际的， esbuild 在 Node.js 上运行的方式并不适合 Web 端
• 由于 esbuild-wasm 在浏览器上运行时的诸多限制（没有 npm 和 nodejs），唯一的选择是模块来自 Web，但 esbuild 本身不支持导入 http(s)://.. . 模块，因此需要不同的解决方案

为了解决这些问题，esbuild 的插件系统发挥了作用。 bundlejs 总共依赖 4 个插件来解决这些限制：

• HTTP 插件：获取和缓存模块
• CDN 插件：将 npm 包导入（称为裸导入）重定向到内容交付网络 (CDN) url 以获取
• EXTERNALS 插件 ：将某些 import/export 模块标记为要从打包中排除的模块
• ALIAS 插件 : 将某些导入/导出别名到不同名称的模块

以上插件实现了 esbuild-wasm 创建 javascript 包，而 esbuild-wasm 是一个用于 esbuild 的跨平台 WebAssembly 二进制文件，一个 JavaScript 打包器和压缩器。

3.使用 bundlejs

基础配置

在 v0.2 中，bundlejs 添加了对自定义配置 (configs) 的支持，目前支持大部分 esbuild 的构建选项，以及一些用于更改默认 CDN 和压缩算法的添加选项。

{
  "cdn": "https://unpkg.com",
  "compression": "gzip",
  // 注意：有 3 种可用的压缩算法，brotli、gzip 和 lz4
  "esbuild": {
      "target": [ "esnext"],
      "format": "esm",
      "bundle": true,
      "minify": true,
      "treeShaking": true,
      "platform": "browser"
  }
}

同时，可以借助于 bundlejs 打包平台提供的能力在不同开发者之间分享配置。

CDN

内容交付网络 (CDN) 是一种在全球范围内快速分发代码的方法。 在 bundlejs 的上下文中，CDN 代表 bundlejs 可以从中获取的代码在线存储库。

例如，unpkg.com 是一个快速的全球内容交付网络，适用于 npm 上的所有内容。 它用于使用如下 URL 快速轻松地从 npm 上的任何包加载任何文件：https://unpkg.com/package-name@version/file.js，其他平台，如： skypack.dev，esm.sh 也提供了类似功能。

默认情况下，bundlejs 允许使用如下的代码：

export * from "@okikio/animate";

bundlejs 会自动从 unpkg 中获取特定的包。

{
    "cdn": "https://cdn.esm.sh",
    // OR
    "cdn": "skypack"
}

压缩算法

bundlejs 提供了使用以下方式进行打包的选项：

• brotli ：产生最小的包大小但它是最慢的
• gzip ： 产生第二小的包大小，但它比 brotli 快（默认）。最终选择将 pako 替换为 denoflate 作为 gzip 的默认压缩算法，它比 pako 更快更小。
• lz4 ： 产生最大的包大小但它是最快的包算法。bundlejs 使用 deno-lz4，其也通过 WASM 运行，但 deno-lz4 压缩自身的方式与 deno-brotli 略有不同

就 brotli 来说，其是一种压缩算法，可以很好地压缩数据，但是，与其他替代方案相比，它的速度非常慢。 bundlejs 通过 deno-brotli 包含了一个 WASM 版本的 brotli，deno-brotli 主要做了以下两件事情：

• 将 deno-brotli 所需的巨大 WASM 文件压缩成 lz4 压缩字符串，然后可以通过 lz4 解压缩，从而可以轻松地将 WASM 存储为 js 文件（结果是构建工具支持很好，因为 WASM 只是一个字符串 在 JS 文件中，加上它很好地解决了生态系统问题）。
• 通过将 WASM 作为 js 文件，实际上可以将 WASM 作为 js 模块预加载

关于 bundlejs 的更多用法，比如：压缩质量、Aliases 和 Externals、Esbuild 配置选项、编辑器按钮、JSX支持、共享打包会话、Bundle 分析、安全和性能等高级用法本文不再展开，大家可以参考文末的资料自行学习

4.本文总结

本文主要和大家介绍 bundlejs，即一个基于 esbuild 的优秀在线打包器和包大小检查器 。相信通过本文的阅读，大家对 bundlejs 会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://blog.okikio.dev/documenting-an-online-bundler-bundlejs

https://bundlejs.com/

https://github.com/okikio/bundlejs