pnpm ดีกว่า npm ยังไง?

Fri, 07 Feb 2025

pnpm(Performant NPM) คือ Package Manager ที่ถูกออกแบบมาให้ทำงานได้เร็วกว่าและใช้พื้นที่จัดเก็บน้อยกว่า NPM และ Yarn นั่นจึงเป็นสาเหตุที่ทำให้ pnpm ได้รับความนิยมมากขึ้นเรื่อยๆ

ทำไมต้องใช้ pnpm?

ประหยัดพื้นที่จัดเก็บ (Disk Space Efficient)
- pnpm ใช้แนวคิดของ Content Addressable Storage ที่ทำให้แพ็กเกจที่เหมือนกันถูกเก็บเพียงชุดเดียว และใช้ symbolic link ไปยังโฟลเดอร์โปรเจกต์ที่ต้องการใช้งาน
- ต่างจาก NPM และ Yarn ที่คัดลอกแพ็กเกจไปยังแต่ละโปรเจกต์ ทำให้สิ้นเปลืองพื้นที่จัดเก็บมากขึ้น
ติดตั้งแพ็กเกจได้รวดเร็ว (Faster Installations)
- ด้วยระบบการจัดเก็บแพ็กเกจแบบแคชที่มีประสิทธิภาพ ทำให้การติดตั้งแพ็กเกจที่เคยติดตั้งไปแล้วสามารถทำได้เกือบจะทันที
- ใช้โครงสร้างของ Hard Link และ Symbolic Link เพื่อลดความซ้ำซ้อนของไฟล์
ป้องกันปัญหาข้อผิดพลาดของ dependency (Less Dependency Issues)
- pnpm ใช้ strict node_modules structure ซึ่งช่วยลดปัญหาของการพึ่งพาแพ็กเกจที่ไม่ถูกต้อง
- Dependency tree ของ pnpm จัดการให้แต่ละแพ็กเกจได้รับเวอร์ชันที่ถูกต้อง และลดปัญหาการเกิด dependency conflicts
รองรับการทำงานแบบ Monorepo ได้ดีขึ้น
- pnpm รองรับการจัดการ Package แบบ workspaces ทำให้การพัฒนาแอปพลิเคชันที่มีหลายโมดูลเป็นเรื่องง่ายขึ้น
Monorepo(Mono Repository) คือแนวทางการจัดเก็บ Code หลาย Projet หรือหลาย Package ไว้ใน Repository เดียวกัน แทนที่จะใช้หลาย Repository แยกกัน(Polyrepo) ซึ่งการที่จะทำงานกับ Monorepo จะต้องใช้ workspaces ของ Package manager เป็นตัวแบ่งแยก Code ซึ่ง pnpm จะมาพร้อมกับ feature นี้ ดูขั้นตอนการสร้าง workspace ต่อด้านล่าง

การติดตั้งและใช้งาน pnpm

การติดตั้ง pnpm

หากคุณยังไม่มี pnpm สามารถติดตั้งได้ผ่าน npm หรือ corepack:

npm install -g pnpm

หรือใช้ corepack (สำหรับ Node.js เวอร์ชันใหม่ ๆ):

corepack enable pnpm

คำสั่งพื้นฐานของ PNPM

การใช้งาน pnpm นั้นมีความใกล้เคียงกับ npm และ yarn มาก โดยจะใช้คำสั่งต่างๆดังต่อไปนี้

Install package ต่างๆเข้ามาใน Project ด้วยคำสั่ง
```
pnpm install <package_name>
```
Install package ที่จะใช้แค่ตอน dev เท่านั้น(ไม่นำขึ้นไปบน Production)
```
pnpm add <package_name> -D
```
ลบ Package ที่ไม่ต้องการออก
```
pnpm remove <package_name>
```
เรียกใช้ Scripts ที่กำหนดไว้ใน package.json:
```
pnpm run <script_name>
```
Update package ให้เป็น version ล่าสุด
```
pnpm update
```
ติดตั้ง Packages ทั้งหมดที่ได้ระบุไว้ใน package.json
```
pnpm install
```

เปรียนเทียบคำสั่งของ pnpm, npm และ yarn

เราสามารถเทียบเคียงคำสั่งพื้นฐานของ pnpm, npm และ yarn ได้ดังตารางนี้

npm	yarn	pnpm
npm init	yarn init	corepack use pnpm@latest
npm install	yarn	pnpm install
npm install [pkg]	yarn add [pkg]	pnpm add [pkg]
npm uninstall [pkg]	yarn remove [pkg]	pnpm remove [pkg]
npm update	yarn upgrade	pnpm update
npm list	yarn list	pnpm list
npm run [scriptName]	yarn [scriptName]	pnpm [scriptName]
npx [command]	yarn dlx [command]	pnpm dlx [command]
npm exec [commandName]	yarn exec [commandName]	pnpm exec [commandName]
npm init [initializer]	yarn create [initializer]	pnpm create [initializer]

ซึ่งจะเห็นว่าคำสั่งของ pnpm, npm และ yarn นั้นคล้ายกันมากๆ นั่นจึงทำให้เราสามารถเปลี่ยนจาก npm หรือ yarn มาเป็น pnpm ได้ง่ายมากๆ โดยเฉพาะใครที่ใช้งาน yarn อยู่แล้วคำสั่งของ pnpm แทบจะเหมือนกับ yarn เลย

เปรียบเทียบ PNPM กับ NPM และ Yarn

คุณสมบัติ	PNPM	NPM	Yarn
การใช้พื้นที่จัดเก็บ	ประหยัดพื้นที่มาก	ใช้พื้นที่เยอะ	ปานกลาง
ความเร็วในการติดตั้งแบบ clean install	เร็วมาก	เร็วกว่า yarn	ช้าที่สุด
การป้องกัน conflicts	ดีมาก	ปานกลาง	ปานกลาง
การรองรับ monorepo	รองรับดีเยี่ยม	รองรับ	รองรับ
การใช้งาน Cache	มี Cache ที่เร็วที่สุด	มี Cache แต่ใช้พื้นที่เยอะ	มี Cache แต่ความเร็วพอๆกับ npm

Pnpm workspaces

เมื่อเราต้องทำงานแบบ Monorepo เราจะต้องแบ่งแยก Code ออกเป็นส่วนๆโดยใช้ workspaces ซึ่งการสร้าง workspaces ใน pnpm มีขั้นตอนต่างๆดังนี้

สร้างไฟล์ pnpm-workspace.yml เพื่อกำหนดโครงสร้างของ workspace
```
packages:
    - "packages/*"
    - "apps/*"
```
สร้าง Folder ตามที่เรานิยามไว้ในขึ้นตอนก่อนหน้า
```
mkdir -p packages/utils apps/web apps/api
cd apps/web
pnpm init
```

การจัดการ Package ในแต่ละ Workspace

หลังจากที่เราแบ่งแยก Workspace แล้วหลังจากนี้ถ้าเราต้องการ install, update หรือ remove package เราจะต้องเลือกว่าจะให้มีผลกับ workspace เดียวหรือทุก workspaces ซึ่งเราจะใช้คำสั่งต่างๆ ดังนี้

Install Package

ไปที่ Workspace ที่ต้องการติดตั้ง package และรันคำสั่ง

pnpm add lodash

หากต้องการให้ติดตั้งเฉพาะ package เดียว:

pnpm add react --filter ./apps/web

หากต้องการให้ apps/web ใช้ packages/utils

pnpm add @myorg/utils --filter ./apps/web

Run ทุกๆ Workspaces

ใช้ pnpm run กับทุก Workspaces พร้อมๆกัน

pnpm run build --recursive

หรือจะเลือกรันเฉพาะ Workspace ใด Workspace หนึ่งให้ใช้คำสั่ง

pnpm run dev --filter ./apps/web

Remove Dependencies

ถ้าต้องการลบแพ็กเกจออกจาก workspace:

pnpm remove lodash --filter ./apps/web

Update Dependencies

pnpm update

หรืออัปเดตเฉพาะ Workspace ใด Workspace หนึ่ง

pnpm update --filter ./packages/utils

ข้อดีของการสร้าง pnpm Workspace

ประหยัดพื้นที่ด้วย store ของ pnpm
แชร์ Dependencies ระหว่าง package
จัดการ Monorepo ได้ง่ายขึ้น
ทำงานเร็วกว่า npm และ yarn workspaces

สรุป

pnpm เป็นตัว Package Manager ที่ทรงพลังและมีประสิทธิภาพสูง เหมาะสำหรับนักพัฒนาที่ต้องการลดเวลาในการติดตั้งแพ็กเกจและลดการใช้พื้นที่จัดเก็บ ด้วยการจัดการ Dependency ที่ดีกว่าและรองรับ Monorepo ได้ดี pnpm จึงเป็นทางเลือกที่ยอดเยี่ยมสำหรับการพัฒนาโปรเจกต์ขนาดใหญ่และเล็กอย่างมีประสิทธิภาพ

หากคุณยังไม่เคยลองใช้ pnpm ผมแนะนำให้ลองติดตั้งและใช้งานดู แล้วคุณจะพบว่ามันดีจริงๆ