וואו, pnpm, אתה ממש מהיר: איך להשתמש בו ב-Heroku

אם אתה מפתח Node.js , אז אתה מכיר את npm ואת Yarn . אולי אפילו יש לך דעה נחרצת לגבי השימוש באחד על פני השני. במשך שנים, מפתחים נאבקים עם הנפיחות - באחסון הדיסק ובזמן הבנייה - בעבודה עם מנהלי חבילות Node.js, במיוחד npm .

ואז, הגיע pnpm , מנהל חבילות שמטפל באחסון חבילות בצורה שונה, חוסך למשתמשים מקום ומצמצם את זמן הבנייה. כך מתארת pnpm את ההבדל :

"כאשר אתה מתקין חבילה, אנו שומרים אותה בחנות גלובלית במחשב שלך, ואז אנו יוצרים ממנה קישור קשיח במקום להעתיק. עבור כל גרסה של מודול, יש רק עותק אחד שמור בדיסק. בעת שימוש ב-npm או yarn למשל, אם יש לך 100 חבילות באמצעות lodash, יהיו לך 100 עותקים של lodash בדיסק. pnpm מאפשר לך לחסוך ג'יגה-בייט של שטח דיסק!"

אין זה מפתיע ש-pnpm צובר אחיזה, כאשר יותר ויותר מפתחים הופכים אותו למנהל החבילות הרצוי להם. יחד עם שיעור האימוץ הגובר הזה, מפתחים רבים שמפעילים את האפליקציות שלהם ב-Heroku (כמוני) רצו לראות תמיכה ב-pnpm.

למרבה המזל, pnpm זמין דרך Corepack , שמופץ עם Node.js. אז, החל ממאי 2024, pnpm זמין כעת ב-Heroku !

בפוסט זה, נסקור את מה שנדרש כדי להתחיל עם pnpm ב-Heroku. בנוסף, נציג כמה מהיתרונות של האחסון וזמן הבנייה שאתה מקבל מהשימוש בו.

פריימר מהיר ב-pnpm

pnpm נוצר כדי לפתור את בעיית מנהל החבילות הוותיקה של Node.js של אחסון מיותר וחוסר יעילות בטיפול בתלות . תלויות העתקת npm ו-Yarn לתוך node_modules של כל פרויקט. לעומת זאת, pnpm שומרת את כל החבילות לכל הפרויקטים בחנות גלובלית אחת ואז יוצרת קישורים קשיחים לחבילות הללו במקום להעתיק אותם. מה זה אומר?

נניח שיש לנו פרויקט Node.js שמשתמש lodash . באופן טבעי, לפרויקט תהיה תיקיית node_modules , יחד עם תיקיית משנה בשם lodash , מלאה בקבצים. ליתר דיוק, [email protected] יש 639 קבצים ועוד תיקיית משנה בשם fp , עם עוד 415 קבצים.

זה יותר מאלף קבצים עבור lodash בלבד!

יצרתי שישה פרויקטים של Node.js: שניים עם pnpm, שניים עם npm ושניים עם Yarn. כל אחד מהם משתמש 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 הוא קצת יותר מחצי מגה-בייט. אנחנו לא רואים קישורים רכים, אז במבט ראשון, זה באמת נראה שלכל פרויקט יש עותק משלו של הקובץ הזה. עם זאת, זה לא המקרה בפועל.

השתמשתי ls עם הדגל -i כדי להציג את האינוד של הקובץ lodash.js . אתה יכול לראות בפרויקטים pnpm-foo ו- pnpm-bar , לשני הקבצים יש את אותו האינוד ( 15922696 ). הם מצביעים על אותו קובץ! זה לא המקרה עבור npm או Yarn.

לכן, אם יש לך תריסר פרויקטים המשתמשים ב-npm או Yarn, והפרוייקטים האלה משתמשים lodash , אז יהיו לך תריסר עותקים שונים של lodash , יחד עם עותקים מתלות אחרות באותם פרויקטים שבעצמם משתמשים lodash . ב-pnpm, כל פרויקט ותלות שדורשים את הגרסה הספציפית הזו של lodash מצביעים על אותו עותק גלובלי בודד.

הקוד עבור [email protected] הוא קצת פחות מ-5 MB בגודל. האם אתה מעדיף לקבל 100 עותקים מיותרים שלו במחשב שלך, או רק עותק גלובלי אחד?

בסופו של יום, התקנת תלות עם pnpm מהירה משמעותית, דורשת פחות שטח דיסק ופחות משאבים. למפתחים שעובדים על פני מספר פרויקטים או מנהלים תלות בפלטפורמות ענן, pnpm מציעה דרך רזה ומהירה יותר לנהל חבילות. זה הופך את pnpm לאידיאלי עבור סביבת פריסה יעילה כמו Heroku.

האם אתה מוכן להתחיל להשתמש בו? בואו נעבור על איך.

תחילת העבודה עם pnpm

הנה הגרסה של Node.js איתה אנחנו עובדים במחשב שלנו:

 $ node --version v20.18.0

הפעל והשתמש ב-pnpm

כפי שהזכרנו לעיל, Corepack מגיע עם Node.js, אז אנחנו פשוט צריכים להשתמש corepack כדי להפעיל ולהשתמש ב-pnpm. אנו יוצרים תיקיה עבור הפרויקט שלנו. לאחר מכן, אנו מפעילים את הפקודות הבאות:

 ~/project-pnpm$ corepack enable pnpm ~/project-pnpm$ corepack use pnpm@latest Installing [email protected] in the project... Already up to date Done in 494ms

זה יוצר קובץ package.json שנראה כך:

 { "packageManager": "[email protected]+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": "[email protected]+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

מצאנו buildpack שמוסיף חותמות זמן לשלבי הבנייה ביומן Heroku כדי שנוכל לחשב את זמני הבנייה בפועל עבור הפרויקטים שלנו. אנו רוצים להוסיף את ה-buildpack לפרויקט שלנו ולהפעיל אותו לפני ה- 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.

זהו! לאחר מכן, אנו דוחפים את הקוד לפרויקט מנוהל 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 [email protected] 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 [email protected] 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, גם באמצעות ה-buildpack של timings.

 ~/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.

מַסְקָנָה

כשהתחלתי בפיתוח Node.js , השתמשתי ב-npm. לפני מספר שנים, עברתי ל-Yarn, וזה מה שהשתמשתי בו. . . עד לאחרונה. עכשיו, עשיתי את המעבר ל-pnpm. במחשב המקומי שלי, אני יכול לפנות שטח דיסק משמעותי. גם הבנייה מהירה יותר. ועכשיו, עם תמיכת Heroku עבור pnpm, זה סוגר את הלולאה כך שאוכל להשתמש בו אך ורק מהפיתוח המקומי ועד לפריסה בענן.

קידוד שמח!