Jak wyświetlić rozmiar pakietów npm?

Kiedy szukam pakietów w NPM, chciałbym zobaczyć rozmiary pakietów (w KB lub MB itp.). NPM nie wydaje się pokazywać tych informacji.

Jak mogę określić, ile nadużyć pakiet NPM doda do mojego projektu?

Prawdopodobnie chcesz zmierzyć wpływ pakietu, jeśli dodasz go do pakietu aplikacji. Większość innych odpowiedzi szacuje tylko rozmiar plików źródłowych, które mogą być niedokładne z powodu komentarzy w wierszu, długich nazw zmiennych itp.

Jest małe narzędzie, które stworzyłem, które powie ci min + gzip rozmiar pakietu po tym, jak dostanie się do twojego pakietu -

https://bundlephobia.com

Spójrz na ten projekt kosztu modułów . Jest to pakiet npm, który podaje rozmiar pakietu i liczbę dzieci.

Instalacja: npm install -g cost-of-modules

Sposób użycia: Uruchom cost-of-modulesw katalogu, w którym pracujesz.

Stworzyłem narzędzie, rozmiar pobierania npm , które sprawdza rozmiar tarballa dla danego pakietu npm, włączając w to wszystkie tarballe w drzewie zależności. Daje to wyobrażenie o koszcie (czas instalacji, miejsce na dysku, zasoby wykonawcze, audyt bezpieczeństwa, ...) dodania zależności z góry.

Na powyższym obrazku rozmiar Tarball to tar.gz pakietu i Całkowity rozmiar to rozmiar wszystkich archiwów. Narzędzie jest dość proste, ale robi to, co mówi.

Dostępne jest również narzędzie CLI . Możesz to zainstalować w ten sposób:

npm i -g download-size

I użyj tego w ten sposób:

$ download-size request
request@2.83.0: 1.08 MiB

Kod źródłowy jest dostępny na Github: api , narzędzie CLI i klient sieciowy .

Utworzyłem Package Phobia na początku tego roku z nadzieją, że informacje o rozmiarze paczki pojawią się na npmjs.com, a także śledzę rozrost paczek w czasie.

https://packagephobia.com

Ma to na celu pomiar miejsca na dysku po uruchomieniu npm installdla zależności po stronie serwera, takich jak expresslub zależności deweloperskie, takie jakjest .

Możesz przeczytać więcej o tym narzędziu i innych podobnych narzędziach w pliku readme tutaj: https://github.com/styfle/packagephobia

Zaktualizuj 2020

„Rozmiar po rozpakowaniu” (w zasadzie rozmiar do opublikowania) jest dostępny w witrynie npmjs.com wraz z pozycją „Całkowita liczba plików”. Jednak nie jest to rekurencyjne, co oznacza, żenpm install prawdopodobnie będzie znacznie większe, ponieważ pojedynczy pakiet prawdopodobnie zależy od wielu pakietów (dlatego fobia pakietu jest nadal aktualna).

Istnieje również oczekujący dokument RFC dotyczący funkcji, która drukuje te informacje z interfejsu CLI.

Jeśli używasz webpacka jako pakietu modułów, spójrz na:

• webpack-bundle-analysiser
• analizator rozmiaru pakietu webpack

Zdecydowanie polecam pierwszą opcję. Pokazuje rozmiar w interaktywnej mapie drzewa. Pomaga to znaleźć rozmiar pakietu w dołączonym pliku.

Inne odpowiedzi w tym poście pokazują rozmiar projektu, ale możesz nie używać wszystkich części projektu, na przykład podczas potrząsania drzewem. Inne podejścia mogą wtedy nie pokazać dokładnego rozmiaru.

Spróbuj użyć rozmiaru pakietu .

npx package-size vue,vue-router,vuex react,react-dom,react-router,redux

https://github.com/egoist/package-size

Jeśli używasz Visual Studio Code, możesz użyć rozszerzenia o nazwie Koszt importu .

To rozszerzenie będzie wyświetlane w edytorze w rozmiarze importowanego pakietu. Rozszerzenie wykorzystuje webpack z wtyczką babili-webpack w celu wykrycia importowanego rozmiaru.

Możesz sprawdzić npm-module-stats . Jest to moduł npm, który pobiera rozmiar modułu npm i jego zależności bez instalowania lub pobierania modułu.

Stosowanie:

var stats = require("npm-module-stats");

stats.getStats("glob").then((stack) => {

  let dependencies = Object.keys(stack);
  let totalSize = dependencies.reduce((result, key, index) => {
    return result + stack[key].size;
  }, 0);

  console.log('Total Size in Bytes ', totalSize);
  console.log('Total Dependencies ', dependencies.length-1);

}).catch((err) => {
  console.error(err);
});

Może się to wydawać trochę rozwlekłe, ale odpowiednio rozwiązuje problem, który opisałeś.

"Szybkim i brudnym" sposobem jest użycie curl i wzrd.in do szybkiego pobrania zminimalizowanej paczki, a następnie grep rozmiaru pliku:

curl -i https://wzrd.in/standalone/axios@latest | grep Content-Length

Pobieranie jest zminimalizowane, ale nie gzipowane, ale porównując dwa lub więcej z nich, można dobrze zrozumieć relatywny rozmiar pakietów.

howfat to jeszcze jedno narzędzie, które może pokazać całkowity rozmiar paczki:

npx howfat jasmine