認識 Bun.js 和 Vite，兩款web開發提速利器

教學

何不給你的自行車裝上一個喷射引擎？這正是 Bun.js 和 Vite 為網頁開發帶來的速度。讓我們深入這些兩個工具並看看它們提供什麼。瓦列塔的兩位有經驗的開發者 Alexander 和 Oleg 幫助我完成了這件事。

Bun.js：JavaScript 的速度提升

還記得我們認為 Node.js 很快嗎？好吧，Bun.js 相比之下让它看起来很慢。

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

Nodejs vs. Bun performance comparison

Jest/mocha 對比 Bun 性能

從概念到現實

Bun.js 的創造者 Jarred Sumner 並不僅僅是創造了另一個 JavaScript 运行时。他打造了一个速度恶魔，吸引了所有人的注意力。

Bun.js 为什么脱颖而出

  • 极其快速：基於 JavaScriptCore（Safari 的引擎），Bun.js 显著提升性能。即使我们谈论的是具有可接受性能水平的应用程序，它也可以使应用程序的运行速度快一倍。
  • 多功能的工具：Bun.js 不僅是一個运行时。它还是一个打包器，测试运行器和 npm 兼容的包管理器。
  • 現代網絡支持：Bun.js 完全支持 TypeScript 和 JSX，使其對開發者非常友好。

Bun.js：features 打包

坐好，因為 Bun.js 装载了 powerful 功能：

  • 包管理: 像 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 體驗

Evan You，Vue.js 的創始者，開發了 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 優化建造，使靜態網站几乎 Instant Loading。

結論

Bun.js 和 Vite 似乎在網頁開發上取得了飛躍的進步。這些工具是重新定義速度和效率的。雖然 Vite 對於未使用ES 模塊的項目或具有複雜建造配置的項目可能不理想，而 Bun.js 仍在增加貢獻者，但它無法定義它們的潛力。

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