ว้าว pnpm คุณเร็วจริงๆ: วิธีใช้งานบน Heroku

หากคุณเป็นนักพัฒนา คุณคงคุ้นเคยกับ และ แล้ว คุณอาจมีความคิดเห็นที่ชัดเจนเกี่ยวกับการใช้โปรแกรมใดโปรแกรมหนึ่งมากกว่าโปรแกรมอื่นด้วยซ้ำ เป็นเวลาหลายปีที่นักพัฒนาต้องดิ้นรนกับปัญหาที่ไม่จำเป็น — ในการจัดเก็บดิสก์และเวลาในการสร้าง — เมื่อทำงานกับตัวจัดการแพ็กเกจ Node.js Node.js npm Yarn โดยเฉพาะ npm จากนั้น ก็เข้ามา ซึ่งเป็นตัวจัดการแพ็คเกจที่จัดการการจัดเก็บแพ็คเกจในรูปแบบที่แตกต่างกัน ช่วยประหยัดพื้นที่ของผู้ใช้และลดเวลาในการสร้าง ไว้ดังนี้: pnpm pnpm อธิบายความแตกต่างนี้ “เมื่อคุณติดตั้งแพ็คเกจ เราจะเก็บแพ็คเกจนั้นไว้ในที่จัดเก็บส่วนกลางบนเครื่องของคุณ จากนั้นเราจะสร้างฮาร์ดลิงก์จากแพ็คเกจนั้นแทนที่จะคัดลอก สำหรับโมดูลแต่ละเวอร์ชัน จะมีสำเนาอยู่บนดิสก์เพียงหนึ่งชุดเท่านั้น เมื่อใช้ npm หรือ yarn ตัวอย่างเช่น หากคุณมีแพ็คเกจ 100 ชุดที่ใช้ lodash คุณจะมีสำเนา lodash บนดิสก์ 100 ชุด pnpm ช่วยให้คุณประหยัดพื้นที่ดิสก์ได้หลายกิกะไบต์!” ไม่น่าแปลกใจที่ pnpm ได้รับความนิยมมากขึ้นเรื่อยๆ โดยมีนักพัฒนาซอฟต์แวร์จำนวนมากขึ้นเรื่อยๆ ที่เลือกใช้ pnpm เป็นตัวจัดการแพ็คเกจ นอกเหนือจากอัตราการนำไปใช้ที่เพิ่มขึ้นนี้ นักพัฒนาซอฟต์แวร์จำนวนมากที่รันแอปบน Heroku (เช่นเดียวกับฉัน) ก็ต้องการให้มีการรองรับ pnpm โชคดีที่ pnpm พร้อมใช้งานผ่าน ซึ่งแจกจ่ายพร้อมกับ Node.js ดังนั้น ตั้งแต่เดือนพฤษภาคม 2024 ! Corepack pnpm จะพร้อมใช้งานใน Heroku แล้ว ในโพสต์นี้ เราจะกล่าวถึงสิ่งที่ต้องทำเพื่อเริ่มต้นใช้งาน pnpm บน Heroku และเราจะแสดงข้อดีบางประการเกี่ยวกับพื้นที่เก็บข้อมูลและระยะเวลาในการสร้างที่คุณจะได้รับจากการใช้งานด้วย คู่มือเบื้องต้นเกี่ยวกับ pnpm pnpm ถูกสร้างขึ้นเพื่อแก้ปัญหาตัวจัดการแพ็คเกจ Node.js ที่มีมาอย่างยาวนานเกี่ยวกับพื้นที่จัดเก็บที่ซ้ำซ้อนและประสิทธิภาพที่ต่ำใน npm และ Yarn จะคัดลอกการอ้างอิงลงใน ของแต่ละโครงการ ในทางกลับกัน pnpm จะเก็บแพ็คเกจทั้งหมดสำหรับทุกโครงการไว้ในที่จัดเก็บส่วนกลางเพียงแห่งเดียว จากนั้นจึงสร้างฮาร์ดลิงก์ไปยังแพ็คเกจเหล่านี้แทนที่จะคัดลอกไป ซึ่งหมายความว่าอย่างไร การจัดการการอ้างอิง node_modules สมมติว่าเรามีโครงการ Node.js ที่ใช้ โดยธรรมชาติแล้ว โครงการจะมีโฟลเดอร์ พร้อมกับโฟลเดอร์ย่อยชื่อ ซึ่งเต็มไปด้วยไฟล์ โดยเฉพาะอย่างยิ่ง มีไฟล์ 639 ไฟล์และโฟลเดอร์ย่อยอีกโฟลเดอร์ชื่อ ซึ่งมีไฟล์อีก 415 ไฟล์ lodash node_modules lodash lodash@4.17.21 fp นั่นเป็นไฟล์มากกว่าหนึ่งพันไฟล์สำหรับ เพียงอันเดียว! lodash ฉันสร้างโปรเจ็กต์ Node.js จำนวน 6 โปรเจ็กต์ ได้แก่ โปรเจ็กต์ pnpm 2 โปรเจ็กต์ npm 2 โปรเจ็กต์ และโปรเจ็กต์ Yarn 2 โปรเจ็กต์ โดยแต่ละโปรเจ็กต์ใช้ มาดูข้อมูลของไฟล์เพียงไฟล์เดียวในโฟลเดอร์การอ้างอิง กัน lodash lodash ~/six-projects$ ls -i npm-foo/node_modules/lodash/lodash.js 14754214 -rw-rw-r-- 544098 npm-foo/node_modules/lodash/lodash.js ~/six-projects$ ls -i npm-bar/node_modules/lodash/lodash.js 14757384 -rw-rw-r-- 544098 npm-bar/node_modules/lodash/lodash.js ~/six-projects$ ls -i yarn-foo/node_modules/lodash/lodash.js 14760047 -rw-r--r-- 544098 yarn-foo/node_modules/lodash/lodash.js ~/six-projects$ ls -i yarn-bar/node_modules/lodash/lodash.js 14762739 -rw-r--r-- 544098 yarn-bar/node_modules/lodash/lodash.js ~/six-projects$ ls -i pnpm-foo/node_modules/lodash/lodash.js 15922696 -rw-rw-r-- 544098 pnpm-foo/node_modules/lodash/lodash.js ~/six-projects$ ls -i pnpm-bar/node_modules/lodash/lodash.js 15922696 -rw-rw-r-- 544098 pnpm-bar/node_modules/lodash/lodash.js ไฟล์ มีขนาดมากกว่าครึ่งเมกะไบต์เล็กน้อย เราไม่เห็นลิงก์แบบซอฟต์ลิงก์ ดังนั้นเมื่อดูครั้งแรก ดูเหมือนว่าแต่ละโปรเจ็กต์จะมีสำเนาไฟล์นี้เป็นของตัวเอง อย่างไรก็ตาม จริงๆ แล้วไม่ใช่เช่นนั้น lodash.js ฉันใช้ พร้อมแฟล็ก เพื่อแสดง ของไฟล์ คุณจะเห็นในโปรเจ็กต์ และ ว่าไฟล์ทั้งสองมีอินโหนดเดียวกัน ( ) โดยชี้ไปที่ไฟล์เดียวกัน! ไม่ใช่กรณีของ npm หรือ Yarn ls -i อินโหนด lodash.js pnpm-foo pnpm-bar 15922696 ดังนั้น หากคุณมีโครงการจำนวน 12 โครงการที่ใช้ npm หรือ Yarn และโครงการเหล่านั้นใช้ คุณจะมีสำเนา ที่แตกต่างกันจำนวน 12 ชุด รวมถึงสำเนาจากการอ้างอิงอื่นๆ ในโครงการเหล่านั้นที่ใช้ เช่นกัน ใน pnpm โครงการและการอ้างอิงทุกโครงการที่ต้องการ เวอร์ชันเฉพาะนี้จะชี้ไปที่สำเนาสากลชุดเดียวชุดเดียวกัน lodash lodash lodash lodash โค้ดสำหรับ มีขนาดไม่ถึง 5 MB คุณต้องการมีสำเนาสำรอง 100 ชุดบนเครื่องของคุณหรือสำเนารวมเพียงชุดเดียว? lodash@4.17.21 ท้ายที่สุดแล้ว การติดตั้งสิ่งที่ต้องพึ่งพาด้วย pnpm จะเร็วขึ้นอย่างเห็นได้ชัด โดยต้องใช้พื้นที่ดิสก์และทรัพยากรน้อยลง สำหรับนักพัฒนาที่ทำงานในหลายโครงการหรือจัดการสิ่งที่ต้องพึ่งพาบนแพลตฟอร์มคลาวด์ pnpm นำเสนอวิธีจัดการแพ็คเกจที่กระชับและรวดเร็วขึ้น ซึ่งทำให้ pnpm เหมาะอย่างยิ่งสำหรับสภาพแวดล้อมการปรับใช้ที่มีประสิทธิภาพ เช่น Heroku คุณพร้อมที่จะเริ่มใช้งานหรือยัง? มาดูกันว่าต้องทำอย่างไร เริ่มต้นใช้งาน pnpm นี่คือเวอร์ชันของ Node.js ที่เรากำลังใช้งานอยู่บนเครื่องของเรา: $ node --version v20.18.0 เปิดใช้งานและใช้งาน pnpm ดังที่เราได้กล่าวไปข้างต้น Corepack มาพร้อมกับ Node.js ดังนั้นเราเพียงแค่ต้องใช้ เพื่อเปิดใช้งานและใช้ pnpm จากนั้นเราสร้างโฟลเดอร์สำหรับโปรเจ็กต์ของเรา จากนั้นเรารันคำสั่งเหล่านี้: corepack ~/project-pnpm$ corepack enable pnpm ~/project-pnpm$ corepack use pnpm@latest Installing pnpm@9.12.2 in the project... Already up to date Done in 494ms ซึ่งจะสร้างไฟล์ ที่มีลักษณะดังนี้: package.json { "packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228" } ซึ่งจะสร้างไฟล์ ด้วยเช่นกัน pnpm-lock.yaml ขั้นตอนต่อไปคือการเพิ่มการอ้างอิงลงในโครงการของเรา สำหรับการสาธิต เราจะคัดลอกรายการ และ ที่พบในไฟล์ สำหรับ ตอนนี้ไฟล์ ของเรามีลักษณะดังนี้: dependencies devDependencies package.json การทดสอบประสิทธิภาพ บน GitHub package.json { "version": "0.0.1", "dependencies": { "animate.less": "^2.2.0", "autoprefixer": "^10.4.17", "babel-core": "^6.26.3", "babel-eslint": "^10.1.0", ... "webpack-split-by-path": "^2.0.0", "whatwg-fetch": "^3.6.20" }, "devDependencies": { "nan-as": "^1.6.1" }, "packageManager": "pnpm@9.12.2+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228" } จากนั้นเราจึงทำการติดตั้งแพคเกจ ~/project-pnpm$ pnpm install การเปรียบเทียบคำสั่งทั่วไป การใช้งาน pnpm นั้นค่อนข้างจะคล้ายกับ npm หรือ yarn และควรใช้งานง่าย ด้านล่างนี้คือตารางที่เปรียบเทียบการใช้งานที่แตกต่างกันของคำสั่งทั่วไป (นำมาจาก ) โพสต์นี้ การเปรียบเทียบความเร็วในการสร้าง Heroku ตอนนี้เราได้แสดงวิธีการสร้างโปรเจ็กต์และใช้งานด้วย pnpm แล้ว (มันค่อนข้างง่ายใช่ไหม) เราต้องการเปรียบเทียบเวลาในการสร้างสำหรับตัวจัดการแพ็คเกจต่างๆ เมื่อใช้งานบน Heroku เราตั้งค่าโปรเจ็กต์สามโปรเจ็กต์ที่มีการอ้างอิงเหมือนกัน โดยใช้ npm, Yarn และ pnpm ขั้นแรกให้เราล็อกอินเข้าสู่ Heroku CLI ( ) heroku login จากนั้นเราจะสร้างแอปสำหรับโครงการ เราจะแสดงขั้นตอนสำหรับโครงการ npm ~/project-npm$ heroku apps:create --stack heroku-24 npm-timing Creating ⬢ npm-timing... done, stack is heroku-24 https://npm-timing-5d4e30a1c656.herokuapp.com/ | https://git.heroku.com/npm-timing.git เราพบ ในขั้นตอน build ใน Heroku log เพื่อให้เราสามารถคำนวณเวลา build จริงสำหรับโปรเจ็กต์ของเราได้ เราต้องการเพิ่ม buildpack นั้นลงในโปรเจ็กต์ของเราและให้ทำงานก่อน เราทำได้โดยใช้คำสั่งสองคำสั่งต่อไปนี้: buildpack ที่เพิ่ม timestamps buildpack มาตรฐานสำหรับ Node.js ~/project-npm$ heroku buildpacks:add \ --index=1 \ https://github.com/edmorley/heroku-buildpack-timestamps.git \ --app pnpm-timing ~/project-npm$ heroku buildpacks:add \ --index=2 heroku/nodejs \ --app npm-timing Buildpack added. Next release on npm-timing will use: 1. https://github.com/edmorley/heroku-buildpack-timestamps.git 2. heroku/nodejs Run git push heroku main to create a new release using these buildpacks. เท่านี้ก็เรียบร้อย! จากนั้นเราก็ทำการ push โค้ดสำหรับโปรเจ็กต์ที่จัดการโดย npm ของเรา ~/project-npm$ git push heroku main ... remote: Updated 4 paths from 5af8e67 remote: Compressing source files... done. remote: Building source: remote: remote: -----> Building on the Heroku-24 stack remote: -----> Using buildpacks: remote: 1. https://github.com/edmorley/heroku-buildpack-timestamps.git remote: 2. heroku/nodejs remote: -----> Timestamp app detected remote: -----> Node.js app detected ... remote: 2024-10-22 22:31:29 -----> Installing dependencies remote: 2024-10-22 22:31:29 Installing node modules remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 added 1435 packages, and audited 1436 packages in 11s remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 184 packages are looking for funding remote: 2024-10-22 22:31:41 run `npm fund` for details remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 96 vulnerabilities (1 low, 38 moderate, 21 high, 36 critical) remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 To address issues that do not require attention, run: remote: 2024-10-22 22:31:41 npm audit fix remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 To address all issues possible (including breaking changes), run: remote: 2024-10-22 22:31:41 npm audit fix --force remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 Some issues need review, and may require choosing remote: 2024-10-22 22:31:41 a different dependency. remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 Run `npm audit` for details. remote: 2024-10-22 22:31:41 npm notice remote: 2024-10-22 22:31:41 npm notice New minor version of npm available! 10.8.2 -> 10.9.0 remote: 2024-10-22 22:31:41 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0 remote: 2024-10-22 22:31:41 npm notice To update run: npm install -g npm@10.9.0 remote: 2024-10-22 22:31:41 npm notice remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 -----> Build remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 -----> Caching build remote: 2024-10-22 22:31:41 - npm cache remote: 2024-10-22 22:31:41 remote: 2024-10-22 22:31:41 -----> Pruning devDependencies remote: 2024-10-22 22:31:44 remote: 2024-10-22 22:31:44 up to date, audited 1435 packages in 4s remote: 2024-10-22 22:31:44 remote: 2024-10-22 22:31:44 184 packages are looking for funding remote: 2024-10-22 22:31:44 run `npm fund` for details remote: 2024-10-22 22:31:45 remote: 2024-10-22 22:31:45 96 vulnerabilities (1 low, 38 moderate, 21 high, 36 critical) remote: 2024-10-22 22:31:45 remote: 2024-10-22 22:31:45 To address issues that do not require attention, run: remote: 2024-10-22 22:31:45 npm audit fix remote: 2024-10-22 22:31:45 remote: 2024-10-22 22:31:45 To address all issues possible (including breaking changes), run: remote: 2024-10-22 22:31:45 npm audit fix --force remote: 2024-10-22 22:31:45 remote: 2024-10-22 22:31:45 Some issues need review, and may require choosing remote: 2024-10-22 22:31:45 a different dependency. remote: 2024-10-22 22:31:45 remote: 2024-10-22 22:31:45 Run `npm audit` for details. remote: 2024-10-22 22:31:45 npm notice remote: 2024-10-22 22:31:45 npm notice New minor version of npm available! 10.8.2 -> 10.9.0 remote: 2024-10-22 22:31:45 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.0 remote: 2024-10-22 22:31:45 npm notice To update run: npm install -g npm@10.9.0 remote: 2024-10-22 22:31:45 npm notice remote: 2024-10-22 22:31:45 remote: 2024-10-22 22:31:45 -----> Build succeeded! ... เราดูเวลาสำหรับขั้นตอนต่อไปนี้จนกระทั่งมีข้อความแจ้ง ใกล้จะสิ้นสุด: Build succeeded Installing dependencies Build Pruning devDependencies Caching build โดยรวมการใช้ npm สร้างนี้ใช้เวลา 16 วินาที เราได้รันการตั้งค่าแบบเดียวกันสำหรับโครงการที่จัดการโดย pnpm โดยใช้ timings buildpack ด้วยเช่นกัน ~/project-pnpm$ heroku apps:create --stack heroku-24 pnpm-timing ~/project-pnpm$ heroku buildpacks:add \ --index=1 \ https://github.com/edmorley/heroku-buildpack-timestamps.git \ --app pnpm-timing ~/project-pnpm$ heroku buildpacks:add \ --index=2 heroku/nodejs \ --app pnpm-timing ~/project-pnpm$ git push heroku main … remote: 2024-10-22 22:38:34 -----> Installing dependencies remote: 2024-10-22 22:38:34 Running 'pnpm install' with pnpm-lock.yaml … remote: 2024-10-22 22:38:49 remote: 2024-10-22 22:38:49 dependencies: remote: 2024-10-22 22:38:49 + animate.less 2.2.0 remote: 2024-10-22 22:38:49 + autoprefixer 10.4.20 remote: 2024-10-22 22:38:49 + babel-core 6.26.3 … remote: 2024-10-22 22:38:51 -----> Build succeeded! สำหรับการสร้างแบบเดียวกันกับ pnpm ใช้เวลาเพียง 7 วินาทีเท่านั้น เราพบว่าการประหยัดเวลาไม่ได้เกิดขึ้นเฉพาะกับการติดตั้งครั้งแรกเท่านั้น การสร้างในครั้งต่อๆ ไปซึ่งใช้แคชการอ้างอิงก็เร็วขึ้นด้วย pnpm บทสรุป ตอนที่ผมเริ่ม ครั้งแรก ผมใช้ npm เมื่อหลายปีก่อน ผมเปลี่ยนมาใช้ Yarn และนั่นคือสิ่งที่ผมใช้มาตลอด จนกระทั่งเมื่อไม่นานนี้ ตอนนี้ ผมเปลี่ยนมาใช้ pnpm แล้ว บนเครื่องในเครื่องของผม ผมสามารถเพิ่มพื้นที่ว่างในดิสก์ได้มาก การสร้างก็เร็วขึ้นด้วย และตอนนี้ ด้วยการรองรับ pnpm ของ Heroku ทำให้ผมปิดวงจรนี้ลงได้ เพื่อให้ผมสามารถใช้มันได้ตั้งแต่การพัฒนาในเครื่องไปจนถึงการใช้งานบนคลาวด์ พัฒนา Node.js สนุกกับการเขียนโค้ด!