Wow, pnpm, Ju jeni vërtet i shpejtë: Si ta përdorni atë në Heroku

Nëse jeni një zhvillues i Node.js , atëherë jeni njohur me npm dhe Yarn . Ju madje mund të keni një mendim të fortë për përdorimin e njërit mbi tjetrin. Për vite me radhë, zhvilluesit kanë luftuar me fryrjen - në ruajtjen e diskut dhe kohën e ndërtimit - kur punojnë me menaxherët e paketave Node.js, veçanërisht npm .

Më pas, erdhi pnpm , një menaxher paketash që e trajton ndryshe ruajtjen e paketave, duke kursyer hapësirën e përdoruesve dhe duke reduktuar kohën e ndërtimit. Ja se si pnpm përshkruan ndryshimin :

“Kur instaloni një paketë, ne e mbajmë atë në një dyqan global në kompjuterin tuaj, më pas krijojmë një lidhje të fortë prej saj në vend që ta kopjojmë. Për çdo version të një moduli, ruhet vetëm një kopje në disk. Kur përdorni npm ose fije për shembull, nëse keni 100 paketa duke përdorur lodash, do të keni 100 kopje të lodash në disk. pnpm ju lejon të kurseni gigabajt hapësirë në disk!”

Nuk është për t'u habitur që pnpm po fiton tërheqje, me gjithnjë e më shumë zhvillues që e bëjnë atë menaxherin e paketave të tyre të zgjedhur. Së bashku me atë normë në rritje të adoptimit, shumë zhvillues që ekzekutojnë aplikacionet e tyre në Heroku (si unë) donin të shihnin mbështetjen e pnpm.

Për fat të mirë, pnpm është i disponueshëm përmes Corepack , i cili shpërndahet me Node.js. Pra, që nga maji 2024, pnpm është tani në dispozicion në Heroku !

Në këtë postim, ne do të mbulojmë atë që duhet për të filluar me pnpm në Heroku. Dhe, do të tregojmë gjithashtu disa nga përfitimet e ruajtjes dhe kohës së ndërtimit që merrni nga përdorimi i tij.

Një Primer i shpejtë në pnpm

pnpm u krijua për të zgjidhur problemin e vjetër të menaxherit të paketave Node.js të ruajtjes së tepërt dhe joefikasitetit në trajtimin e varësisë . npm dhe Yarn kopjojnë varësitë në node_modules të secilit projekt. Në të kundërt, pnpm mban të gjitha paketat për të gjitha projektet në një dyqan të vetëm global dhe më pas krijon lidhje të forta me këto paketa në vend që t'i kopjojë ato. Çfarë do të thotë kjo?

Le të supozojmë se kemi një projekt Node.js që përdor lodash . Natyrisht, projekti do të ketë një dosje node_modules , së bashku me një nënfolder të quajtur lodash , të mbushur me skedarë. Për të qenë të saktë, [email protected] ka 639 skedarë dhe një nënfolder tjetër të quajtur fp , me 415 skedarë të tjerë.

Kjo është mbi një mijë skedarë vetëm për lodash !

Kam krijuar gjashtë projekte Node.js: dy me pnpm, dy me npm dhe dy me Yarn. Secili prej tyre përdor lodash . Le të hedhim një vështrim në informacionin për vetëm një nga skedarët në dosjen e varësisë 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

Skedari lodash.js është pak më shumë se gjysmë megabajt në madhësi. Ne nuk po shohim lidhje të buta, kështu që në shikim të parë, me të vërtetë duket se çdo projekt ka kopjen e tij të këtij skedari. Megjithatë, në fakt nuk është kështu.

Kam përdorur ls me flamurin -i për të shfaqur inode të skedarit lodash.js . Mund të shihni në projektet pnpm-foo dhe pnpm-bar , të dy skedarët kanë të njëjtën inode ( 15922696 ). Ata po tregojnë të njëjtin skedar! Ky nuk është rasti për npm ose fije.

Pra, nëse keni një duzinë projektesh që përdorin npm ose Yarn, dhe ato projekte përdorin lodash , atëherë do të keni një duzinë kopje të ndryshme të lodash , së bashku me kopje nga varësi të tjera në ato projekte që vetë përdorin lodash . Në pnpm, çdo projekt dhe varësi që kërkon këtë version specifik të lodash tregon të njëjtën kopje, të vetme, globale.

Kodi për [email protected] është pak më pak se 5 MB në madhësi. Do të dëshironit të kishit 100 kopje të tepërta të tij në kompjuterin tuaj, apo vetëm një kopje globale?

Në fund të fundit, instalimi i varësisë me pnpm është dukshëm më i shpejtë, duke kërkuar më pak hapësirë në disk dhe më pak burime. Për zhvilluesit që punojnë nëpër projekte të shumta ose menaxhojnë varësitë në platformat cloud, pnpm ofron një mënyrë më të dobët dhe më të shpejtë për të menaxhuar paketat. Kjo e bën pnpm ideale për një mjedis të thjeshtë të vendosjes si Heroku.

A jeni gati të filloni ta përdorni? Le të ecim përmes mënyrës.

Fillimi me pnpm

Këtu është versioni i Node.js me të cilin po punojmë në makinën tonë:

 $ node --version v20.18.0

Aktivizo dhe përdor pnpm

Siç e përmendëm më lart, Corepack vjen me Node.js, kështu që thjesht duhet të përdorim corepack për të aktivizuar dhe përdorur pnpm. Ne krijojmë një dosje për projektin tonë. Pastaj, ne ekzekutojmë këto komanda:

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

Kjo gjeneron një skedar package.json që duket si ky:

 { "packageManager": "[email protected]+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228" }

Kjo gjeneron gjithashtu një skedar pnpm-lock.yaml .

Më pas, ne shtojmë varësi në projektin tonë. Për qëllime demonstrimi, ne po kopjojmë listën e dependencies dhe devDependencies që gjenden në këtë skedar krahasues package.json në GitHub . Tani, skedari ynë package.json duket si ky:

 { "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" }

Më pas, ne instalojmë paketat.

 ~/project-pnpm$ pnpm install

Krahasimi i komandave të përbashkëta

Përdorimi për pnpm është mjaft i ngjashëm me npm ose fije, dhe kështu duhet të jetë intuitiv. Më poshtë është një tabelë që krahason përdorimet e ndryshme për komandat e zakonshme (marrë nga ky postim ).

Krahasimi i shpejtësisë së ndërtimit të Heroku

Tani që kemi treguar se si të vihet në funksion një projekt me pnpm (është shumë e thjeshtë, apo jo?), ne donim të krahasonim kohët e ndërtimit për menaxherët e ndryshëm të paketave kur ekzekutohet në Heroku. Ne krijuam tre projekte me varësi identike — duke përdorur npm, Yarn dhe pnpm.

Së pari, ne hyjmë në Heroku CLI ( heroku login ).

Më pas, ne krijojmë një aplikacion për një projekt. Ne do të tregojmë hapat për projektin 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

Ne gjetëm një paketë ndërtimi që shton vula kohore në hapat e ndërtimit në regjistrin e Heroku, në mënyrë që të mund të llogarisim kohët aktuale të ndërtimit për projektet tona. Ne duam ta shtojmë atë buildpack në projektin tonë dhe ta bëjmë atë të ekzekutohet përpara buildpack standard për Node.js. Ne e bëjmë atë me dy komandat e mëposhtme:

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

Kjo është ajo! Pastaj, ne shtyjmë kodin për projektin tonë të menaxhuar nga 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! ...

Ne shikuam kohën për hapat e mëposhtëm, derisa mesazhi Build succeeded afër fundit:

• Installing dependencies
• Build
• Pruning devDependencies
• Caching build

Në total, me npm, kjo ndërtim zgjati 16 sekonda.

Ne ekzekutuam të njëjtin konfigurim për projektin e menaxhuar nga pnpm, duke përdorur gjithashtu paketën e ndërtimit të kohës.

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

Për të njëjtën ndërtim me pnpm, u deshën vetëm 7 sekonda.

Kursimet e kohës, zbuluam, nuk janë vetëm për atë instalim fillestar. Ndërtimet e mëvonshme, të cilat përdorin cache-in e varësisë, janë gjithashtu më të shpejta me pnpm.

konkluzioni

Kur fillova për herë të parë zhvillimin e Node.js , përdora npm. Disa vite më parë, kalova te "Fije" dhe këtë e kisha përdorur. . . deri vonë. Tani, kam bërë kalimin në pnpm. Në makinën time lokale, jam në gjendje të liroj hapësirë të konsiderueshme në disk. Ndërtimet janë gjithashtu më të shpejta. Dhe tani, me mbështetjen e Heroku për pnpm, kjo mbyll ciklin në mënyrë që të mund ta përdor ekskluzivisht nga zhvillimi lokal deri në vendosjen në re.

Gëzuar kodimin!