Slash Vercel deployment time in half with pnpm

Developers can focus on creating better user experiences and delivering high-quality projects, rather than waiting for long deployment times on Vercel with pnpm.

Natt Nguyen·February 12, 2023 (2 years ago)·3 min read

#pnpm

#vercel

#devops

#developer-experience

Slash Vercel deployment time in half with pnpm

Introduction

pnpm halved my web project deployment time on Vercel. It went from a little more than a minute to less than half a minute, around 50% faster. That is incredible! Considering there isn't a significant negative tradeoff. Switching from npm feels like a free speed upgrade on Vercel.

But what is pnpm?

pnpm (performance NPM) is a fast, disk space-efficient, and dependable package manager for JavaScript and Node.js. It is an alternative to the popular npm (Node Package Manager) and Yarn package managers, and it aims to improve the performance and reliability of dependency management in Node.js projects.

pnpm uses a novel method of storing packages and their dependencies in a shared store, which allows it to achieve faster install times, reduce disk space usage, and improve consistency across different projects. pnpm also supports most of the npm CLI commands and works seamlessly with existing npm projects, making it easy to adopt and use.

Installation

You can find the offical way to install pnpm here. I prefer installing software with Homebrew when I can.

# Install on Windows with PowerShell
iwr https://get.pnpm.io/install.ps1 -useb | iex

# Install on POSIX systems with curl
curl -fsSL https://get.pnpm.io/install.sh | sh -

# Install on POSIX systems with wget
wget -qO- https://get.pnpm.io/install.sh | sh -

# Install on Alpine Linux with bash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.bashrc" SHELL="$(which bash)" bash -

# Install on Alpine Linux with sh
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.shrc" SHELL="$(which sh)" sh -

# Install on Alpine Linux with dash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.dashrc" SHELL="$(which dash)" dash -

# Install with npm
npm install -g pnpm

# Install with Homebrew
brew install pnpm
# Install on Windows with PowerShell
iwr https://get.pnpm.io/install.ps1 -useb | iex

# Install on POSIX systems with curl
curl -fsSL https://get.pnpm.io/install.sh | sh -

# Install on POSIX systems with wget
wget -qO- https://get.pnpm.io/install.sh | sh -

# Install on Alpine Linux with bash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.bashrc" SHELL="$(which bash)" bash -

# Install on Alpine Linux with sh
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.shrc" SHELL="$(which sh)" sh -

# Install on Alpine Linux with dash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.dashrc" SHELL="$(which dash)" dash -

# Install with npm
npm install -g pnpm

# Install with Homebrew
brew install pnpm
# Install on Windows with PowerShell
iwr https://get.pnpm.io/install.ps1 -useb | iex

# Install on POSIX systems with curl
curl -fsSL https://get.pnpm.io/install.sh | sh -

# Install on POSIX systems with wget
wget -qO- https://get.pnpm.io/install.sh | sh -

# Install on Alpine Linux with bash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.bashrc" SHELL="$(which bash)" bash -

# Install on Alpine Linux with sh
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.shrc" SHELL="$(which sh)" sh -

# Install on Alpine Linux with dash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.dashrc" SHELL="$(which dash)" dash -

# Install with npm
npm install -g pnpm

# Install with Homebrew
brew install pnpm
# Install on Windows with PowerShell
iwr https://get.pnpm.io/install.ps1 -useb | iex

# Install on POSIX systems with curl
curl -fsSL https://get.pnpm.io/install.sh | sh -

# Install on POSIX systems with wget
wget -qO- https://get.pnpm.io/install.sh | sh -

# Install on Alpine Linux with bash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.bashrc" SHELL="$(which bash)" bash -

# Install on Alpine Linux with sh
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.shrc" SHELL="$(which sh)" sh -

# Install on Alpine Linux with dash
wget -qO- https://get.pnpm.io/install.sh | ENV="~/.dashrc" SHELL="$(which dash)" dash -

# Install with npm
npm install -g pnpm

# Install with Homebrew
brew install pnpm

Then in your web project, delete package.lock.json or yarn.lock.

# npm install
pnpm install

# npm install <package>
pnpm add <package>

# npm run dev
pnpm dev
# npm install
pnpm install

# npm install <package>
pnpm add <package>

# npm run dev
pnpm dev
# npm install
pnpm install

# npm install <package>
pnpm add <package>

# npm run dev
pnpm dev
# npm install
pnpm install

# npm install <package>
pnpm add <package>

# npm run dev
pnpm dev

In the future, pnpm might ship with the shorter pn alias (Twitter). You can use the shorter pn alias now with the alias command on terminal.

alias pn=pnpm
alias pn=pnpm
alias pn=pnpm
alias pn=pnpm

Final word

It will have pnpm-lock.yaml in your root directory in your web project. Vercel is smart and automatically detect the change of package management making it a intuitive and wonderful developer experience. After two deployments, you will see the pnpm caching on Vercel and the deployment speed boost.

If you find yourself overwhelmed with different web project and its own package manager, there is @antfu/ni (GitHub), which helps you automatically use right package manager.

Get ready to experience lightning fast deployments with pnpm on Vercel.

Subscribe to my blog