认识 Bun.js 和 Vite，两种 Web 开发加速器

教程

用喷气发动机给自行车加速怎么样？这就是Bun.js和Vite为网页开发带来的速度。让我们深入了解这两种工具，看看它们提供了什么。瓦莱塔的两位经验丰富的开发者亚历山大和奥列格帮助我完成了这个工作。

Bun.js：JavaScript的速度提升

还记得我们认为Node.js很快的时候吗？好吧，与Bun.js相比，Node.js看起来就很慢。

Load times in seconds. Credit for this and several next findings: Valletta

Nodejs vs. Bun performance comparison

Jest/mocha与Bun性能比较

从概念到现实

Bun.js的创建者贾尔德·萨默尔并没有仅仅创造另一个JavaScript运行时。他打造了一个速度恶魔，吸引了所有人的注意力。

为什么Bun.js脱颖而出

  • 极其快速：基于JavaScriptCore（Safari的引擎），Bun.js显著提升了性能。即使我们谈论的是性能可接受的程序，它也能让应用程序的速度快一倍。
  • 多功能工具：Bun.js不仅仅是一个运行时。它还是一个打包器，测试运行器，以及与npm兼容的包管理器。
  • 现代网页支持：Bun.js完全支持TypeScript和JSX，使其非常对开发者友好。

Bun.js：功能丰富

系好安全带，因为Bun.js充满了强大的功能：

  • 包管理: 像bun init, bun install, 和 bun run这样的命令可以让你的工作流程更加顺畅。
  • 快速测试: bun test比Jest更快地运行测试，同时CPU使用率更低。
  • 热重载: bun --hot run index.ts在开发过程中提供了快速的重新加载。
  • 高效打包: bun build的性能优于像webpack这样的传统工具。

Bun.js 实战

想象一下，运行一个生成随机字符串和SHA1散列的Express路由。使用Bun.js，你可以立即处理它们。它轻松地处理10,000个请求，就是这么简单。

新的挑战者

成立于2023年9月，Bun.js正在迅速崭露头角。尽管主要由一个人开发，Jarred Sumner，但它已经打破了记录。

Vite: 快速构建工具

当Bun.js设定速度记录时，Vite重新定义了构建时间。它不仅仅是快，而是非常快。

Vite 体验

Vue.js的创建者Evan You开发了Vite来解决缓慢的构建过程。Vite改变了构建时间，使漫长的等待成为过去。

Vite 的显著功能

  • 模块热替换 (HMR): Vite的HMR如此之快，几乎可以瞬间完成。
  • 优化构建：Vite 使用 esbuild 进行开发和 Rollup 进行生产，以前所未有的方式优化您的构建。
  • 框架无关性：Vite 支持大量流行的框架，如 React、Vue 或 Svelte。
  • 代码分割和异步加载：Vite 高效地分割代码并异步加载块。
  • SSR 支持：Vite 支持开箱即用的服务器端渲染。

Vite 实践

典型的 Vite 生产构建速度极快，仅为 3.37 秒。相比之下，Webpack 需要 10.82 秒，Parcel 需要 9.01 秒。

Vite 的工具

Vite 与一系列工具协同工作：

  • Vitest：一个超级快速的测试框架。
  • Astro：适用于构建内容驱动的网站。
  • Slidev：用于创建演示幻灯片的工具。
  • React-starter-kit：一个强大的 React 模板。

强力组合：Bun.js 和 Vite

单独来看，Bun.js 和 Vite 都非常出色。结合起来，它们势不可挡。将 Bun.js 的速度与 Vite 的高效构建过程相结合，创建了一个强大的开发环境。

开始使用

想尝试这个组合吗？以下是步骤：

安装 Bun.js

JavaScript

  

sh
curl https://bun.sh/install | bash

创建一个 Vite 项目

JavaScript

  

sh
npm create vite@latest my-speed-demon-project
cd my-speed-demon-project

使用 Bun 安装依赖

JavaScript

  

sh
bun install

启动开发服务器

JavaScript

  

sh
bun run dev

现在您可以以惊人的速度进行编码。

实际应用场景

Bun.js 和 Vite 哪些方面表现出色？以下是一些场景：

  • APIs：Bun.js 快速处理后端流程，而 Vite 确保前端始终准备就绪。
  • 实时应用：使用 Bun.js 处理 WebSockets 和 Vite 实现快速更新的实时应用无缝衔接。
  • 静态网站：Vite 优化构建，使静态网站几乎瞬间加载。

总结

Bun.js 和 Vite 似乎是 Web 开发的一大飞跃。这些工具关乎重新定义速度和效率。尽管 Vite 可能不适用于不使用 ES 模块 的项目，或者那些具有复杂构建配置的项目，而且 Bun.js 仍在吸引贡献者，但这还无法定义它们的潜力。

Source:
https://dzone.com/articles/meet-bunjs-and-vite-two-web-development-turbocharg