iTranslated by AI
Next-Generation Tool Bun Proves Fast with Next.js: A Comparison with pnpm
Hello, I'm _mino!
In this article, I have summarized the differences between pnpm and bun, and whether it's a good idea to introduce Bun into a Next.js project, while comparing the latest trends and performance.
Also, since it seems that someone from the Bun team is among the cast of Next Conf on October 22nd, there might be some announcement about the collaboration between Bun and Next.js, so I wanted to get up to speed early.
For those who are wondering, "What's a package manager?" this explanatory article is easy to understand!
🚀 Package Managers to Compare
pnpm
Features
- Disk Efficiency: All packages are stored only once in a global store (~/.pnpm-store), and each project references them via hard links. (e.g., even if 10 projects use the same React v18, only one React is stored on disk.)
- Fast Installation: Approximately 3x faster compared to npm (official benchmarks).
-
Strict Dependency Management: Prevents access to packages not listed in
package.json. Solves the Phantom Dependencies problem. - Reduced Disk Space: Saves up to 90% disk space compared to npm for multiple projects with common dependencies.
Bun
Features
- Fast Execution Speed: Implemented in Zig, uses JavaScriptCore engine. Startup time is 2-4x faster compared to Node.js.
- All-in-One: Integrates runtime, package manager, bundler, and test runner into one.
- Zero Config: TypeScript and JSX work immediately without any setup. No build configuration needed.
- npm Compatibility: Compatible with many npm packages, but limited for packages containing native bindings.
📚 Trends & Popularity
GitHub Stars
The Star History chart (trend of GitHub stars) is shown below.
Despite Bun's v1 being released in September 2023, it has rapidly gained popularity and boasts excellent features and performance. The all-in-one design is also a major factor attracting support.
pnpm also has a large number of stars, earning high praise for its track record in large-scale adoption and efficient management method.
Having sponsors like Vercel, Coderabbit, and Discord is also an advantage.
Adoption Cases
pnpm is formally adopted in ByteDance (TikTok), Microsoft (some systems), and major OSS projects (Next.js, Vite, Prisma).
Bun is being adopted in some systems at X (according to some reports) and in personal development, but full-scale enterprise adoption seems to be in the future. There are also reports of some results at certain companies. Additionally, there are development achievements at mid-scale projects like Midday and Elysia, so expectations for the future are high.
📊 Performance Comparison
Assuming an actual development project, I measured the performance of the following tech stack in local and CI/CD environments.
Framework: Next.js 15 (TypeScript)
Authentication: Firebase Auth
DB: Supabase Database
UI/Styling: Tailwind CSS + shadcn/ui (46 components)
State Management: Zustand
ORM: Drizzle ORM
Validation: Zod
Utilities: date-fns
Email Sending: Resend
Testing: Vitest (pnpm) / Bun Test (bun)
Test cases: 100 files, 470 tests
Installation Time
| Condition | pnpm | bun | bun advantage |
|---|---|---|---|
| No cache (first time) | 15.16s | 6.89s | 55% faster |
| With cache (2nd time) | 5.44s | 2.79s | 49% faster |
Test Execution Time (470 tests)
| Item | pnpm + vitest | bun test | bun advantage |
|---|---|---|---|
| Test execution only | 480ms | 46ms | 10x faster |
| Total time (incl. startup) | 7.15s | 0.05s | 143x faster |
Build Time
| Item | pnpm | bun | Difference |
|---|---|---|---|
| Build time | 10.48s | 10.68s | Almost the same |
CI/CD Time (GitHub Actions)
| Item | pnpm | bun | bun advantage |
|---|---|---|---|
| Install (no cache) | 1.13s | 0.21s | 81% faster |
| Install (with cache) | 6.30s | 2s | 68% faster |
| Test execution (470 tests) | 6.46s | 0.09s | 72x faster |
| Build | 13.71s | 13.80s | Almost equal |
| Total (no cache) | 21.30s | 14.10s | 34% faster |
| Total (with cache) | 26.47s | 15.89s | 40% faster |
Disk Usage
| Item | pnpm | bun | Difference |
|---|---|---|---|
| node_modules | 779MB | 732MB | -47MB (bun is 6% smaller) |
| lockfile | 291KB | 191KB | -100KB (bun is 34% smaller) |
| Global cache | 13GB | 5.6GB | -7.4GB (bun is 57% smaller) |
Performance Comparison Summary
pnpm itself is faster and more efficient compared to npm or yarn (classic), but bun shows even higher performance. The difference is particularly noticeable in test execution speed.
| Item | pnpm | bun |
|---|---|---|
| First-time install | ⚪︎ Fast | ◎ Very fast |
| Cached install | ⚪︎ Fast | ◎ Very fast |
| Build time | ⚪︎ Standard | ⚪︎ Standard |
| Dev server startup | ⚪︎ Standard | ◎ Fast |
| Test execution | ⚪︎ Standard | ◎ Very fast |
| CI/CD environment | ⚪︎ Standard | ◎ Very fast |
| Disk usage | ⚪︎ Efficient | ◎ Very efficient |
🧪 Feature Comparison
I compared items that are important for technology selection.
There are also unique features and convenient functions besides these, so please check the official documentation for more details.
Monorepo Support
pnpm
Create a pnpm-workspace.yaml file at the root and define workspaces as follows:
# pnpm-workspace.yaml
packages:
- 'packages/*'
- 'apps/*'
catalog:
react: ^18.2.0
next: ^14.0.0
typescript: ^5.3.0
"@types/react": ^18.2.0
"@types/node": ^20.0.0
eslint: ^8.50.0
prettier: ^3.0.0
vitest: ^1.0.0
There is centralized version management, and you can use the catalog feature in pnpm-workspace.yaml to manage versions in one place. (Quite convenient!)
// apps/web/package.json
{
"name": "@monorepo/web",
"dependencies": {
"react": "catalog:",
"next": "catalog:",
"@monorepo/ui": "workspace:*" // Reference workspace package
},
"devDependencies": {
"typescript": "catalog:",
"eslint": "catalog:"
}
}
bun
Define workspaces in the root package.json as follows:
// package.json
{
"workspaces": [
"packages/*",
"apps/*"
],
"devDependencies": {
"typescript": "^5.3.0",
"eslint": "^8.50.0",
"prettier": "^3.0.0"
}
}
// apps/web/package.json
{
"name": "@monorepo/web",
"dependencies": {
"react": "^18.2.0",
"next": "^14.0.0",
"@monorepo/ui": "*" // Reference workspace package
}
}
Test Support
pnpm
An external library (jest, vitest, etc.) must be installed and used. Setup and configuration files are required, and additional configuration such as ts-jest is needed when using TypeScript.
// package.json
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
},
"devDependencies": {
"jest": "^29.7.0",
"@types/jest": "^29.5.0",
"ts-jest": "^29.1.0"
}
}
bun
Since it is also a test runner, testing is included from the start. No configuration file is needed, and TypeScript and JSX can be tested directly.
# Run unit tests
bun test
# Test only specific files
bun test ./src/components
# Watch mode
bun test --watch
# Coverage measurement
bun test --coverage
Dependency Management (Security)
pnpm
Strict mechanism where packages not declared cannot be used. Prevents the risk of "it happened to work" but failing in production, and allows early detection of dependency issues in team development.
bun
Disables postinstall scripts by default. Prevents execution of malicious code and provides a secure design where only trusted packages can be individually allowed.
Direct TypeScript/JSX Execution
pnpm
Additional tools such as tsx, ts-node, esbuild-runner are required to execute TypeScript or JSX. Adjustment of configuration files (tsconfig.json) may also be necessary.
// package.json
{
"scripts": {
"dev": "tsx watch src/index.ts"
}
}
# Install an execution tool like tsx
pnpm add -D tsx
# Execute TypeScript files
pnpm tsx script.ts
pnpm tsx component.tsx
bun
Natively supports TypeScript and JSX. No transpilation needed for direct execution, and tsconfig.json settings are automatically recognized. No additional tools are required.
# Execute directly
bun run script.ts
bun run component.tsx
# Watch mode also built-in
bun --watch src/index.ts
npm Compatibility (Reusability)
pnpm
Automatically installs related packages (peer dependencies). Reduces "not found" errors and smooths the use of existing npm packages.
bun
Same shell commands are available on Windows, Mac, and Linux. No need to write different scripts per OS, improving portability of npm scripts.
Node.js Compatibility (Migration)
pnpm
- All Node.js features are available, including fast C++ extensions (native addons).
- Since it runs on Node.js, it automatically follows Node.js version updates.
bun
- Some development support tools such as debug tools and interactive console are not yet supported (no impact on basic web development).
- Uses JavaScriptCore (Safari engine), which works fine for normal development, but compatibility checks are needed for low-level operations.
Feature Comparison Summary
| Feature | pnpm | Bun |
|---|---|---|
| Monorepo support | workspaces supported | workspaces supported |
| Centralized version management | catalog feature | managed via root package.json |
| Test execution | Requires separate tool | Built-in (bun test) |
| Dependency management | Symbolic link method | Hard link method |
| TypeScript execution | Requires separate tool | Native support |
| npm compatibility | Full compatibility | Almost full compatibility |
| Node.js compatibility | 100% | Major APIs supported, some limitations |
🧩 Hosting Environment Comparison (Vercel, Cloud Run)
Here is a comparison between Vercel and Cloud Run, which are candidates for hosting Next.js. Although the difference is only a few seconds, Bun tended to have an advantage on both Vercel and Cloud Run.
Comparison When Deploying to Vercel
Bun's advantage is particularly noticeable in installation time, achieving a 20% total reduction.
| pnpm | bun | bun advantage | |
|---|---|---|---|
| Install time | 5.1s | 3.73s | 27% faster |
| Build time | 12.5s | 10.4s | 17% faster |
| Total time | 17.63s | 14.17s | 20% faster |
Comparison When Deploying to Cloud Run
Although the difference in the initial build is small, Bun was 48% faster for cached builds, a significant difference.
| pnpm | bun | bun advantage | |
|---|---|---|---|
| Initial build | 67s | 64s | 5% faster |
| Cached build | 5.98s | 3.09s | 48% faster |
| Image size | 957MB | 940MB | 1.8% reduction |
📌 Personal Impression
Bun has excellent performance and a rich set of features as an all-in-one tool, so I would like to actively adopt it. However, since it has only been released recently, for large-scale development or client-first projects like contract work, it seems better to choose pnpm for now.
For personal development level or for in-house products that want to incorporate the latest technology, I think adopting Bun at this stage is fine given its future potential (but be careful as some features may not be supported yet).
Not only the development experience, but also the community activity of Bun is quite vibrant compared to others, so overall I recommend it!
Digression (Just for fun)
Bun community's X posts are uniquely interesting (lol)
👀 Closing
Thank you for reading to the end! ☺️
I hope this article will be of some help to your development!
Discussion