Hvor mye diskplass brukes når du installerer en pakke fra npm? Temmelig mye, viser det seg.
Det er nemlig ikke bare selve pakken du installerer som tar opp plass, men også eventuelle andre pakker denne er avhengig av igjen. Installerer du for eksempel Tailwind CSS med npm install tailwindcss får du også 82 andre pakker med på kjøpet – og under halvparten av diskplassen brukes av selve tailwindcss-pakken.
Selve Tailwind CSS har "bare" 22 avhengigheter, men noen av disse har igjen sine egne avhengigheter. Og så bare baller det på seg, og vi ender opp med en størrelse på 12 MB for en Tailwind-installasjon. Bare 5,5 MB av disse tilhører selve tailwindcss-pakken.
pkg-size viser deg den virkelige størrelsen
Utvikleren Hiroki Osame har laget et nyttig verktøy, pkg-size, som finner ut nøyaktig hvor mye diskplass installasjon av en npm-pakke tar.
I tillegg får du en masse detaljert informasjon om hvilke andre pakker som blir installert og størrelsen på dem, lenker til repoer, informasjon om hvorvidt pakken eksporterer TypeScript-typedefinisjoner eller ikke, om det er ESM- eller CommonJS-moduler, og så videre.
Utvikleren skriver i dokumentasjonen at målet med pkg-size er å gjøre det enklere for nysgjerrige utviklere å utforske npm-økosystemet, finne nye pakker og lære mer om de som har laget dem.
De som bruker npm-pakker kan med dette verktøyet finne ut om det er skjulte avhengigheter og hvorfor de er installert, og også få hjelp til å velge mindre og optimaliserte ESM-pakker, eller sammenligne ulike pakker.
Npm oversvømmes av svindel og spam: – Bare toppen av isfjellet
Kjører i WebContainers
Løsningen fungerer ved at du taster inn navnet på én eller flere pakker du vil installere. Pkg-size utfører da en faktisk npm-installasjon i nettleseren ved hjelp av WebContainers, et nettleserbasert Node.js-kjøremiljø fra Stackblitz.
«Alt sammen kjører altså inne i nettleseren, i et slags "mikro-operativsystem" basert på WebAssembly.»
Etter at pakkene er installert, vil pkg-size analysere node_modules-mappen for å hente ut detaljert informasjon om pakkene som har blitt installert. Deretter vil den kjøre esbuild WASM for å "bundle" alt sammen.
Alt sammen kjører altså inne i nettleseren, i et slags "mikro-operativsystem" basert på WebAssembly. Dette mikro-operativsystemet lar deg spinne opp Node.js-baserte servere i nettleseren.
Et par tips
Selv om det er interessant å vite hvor mye diskplass en npm-pakke og alle dens avhengigheter tar, så er det aller viktigste hvor mye som faktisk ender opp i det ferdige prosjektet ditt. Det finnes flere VS Code-tillegg som lar deg få vite det på en enkel måte, som for eksempel Import Cost.
Og til slutt: Hvis du vil begrense hvor mye plass node_modules tar opp på disken, anbefales å prøve pnpm i stedet for npm.
Ikke bare er pnpm mye raskere enn npm, den sørger også for at npm-pakker blir installert bare ett sted som deles mellom applikasjonene dine – i stedet for å lage én node_modules-mappe per applikasjon.
