Как посмотреть размер пакетов npm?

Когда я ищу пакеты в NPM, я хотел бы видеть размеры пакетов (в КБ или МБ и т. Д.). NPM, похоже, не показывает эту информацию.

Как я могу определить, насколько пакет NPM добавит моего проекта?

Что вы, вероятно, захотите измерить, так это влияние пакета, если вы добавите его в свой набор приложений. Большинство других ответов будут оценивать только размер исходных файлов, что может быть неточным из-за встроенных комментариев, длинных имен переменных и т. Д.

Я сделал небольшую утилиту, которая сообщит вам минимальный + gzip-размер пакета после того, как он попадет в ваш бандл -

https://bundlephobia.com

Взгляните на этот проект стоимости модулей . Это пакет npm, в котором будет указан размер пакета и количество дочерних элементов.

Монтаж: npm install -g cost-of-modules

Использование: запускать cost-of-modulesв каталоге, в котором вы работаете.

Я создал инструмент, размер загрузки npm , который проверяет размер архива для данного пакета npm, включая все архивы в дереве зависимостей. Это дает вам представление о стоимости (время установки, дисковое пространство, ресурсы времени выполнения, аудит безопасности, ...) предварительного добавления зависимости.

На изображении выше размер Tarball - это tar.gz пакета, а Общий размер - это размер всех tarball. Инструмент довольно простой, но он делает то, что говорит.

Кли инструмент также доступен. Установить его можно так:

npm i -g download-size

И используйте это так:

$ download-size request
request@2.83.0: 1.08 MiB

Исходный код доступен на Github: api , инструмент cli и веб-клиент .

Я создал Package Phobia в начале этого года с надеждой получить информацию о размере пакета на npmjs.com, а также отслеживать разрастание пакетов с течением времени.

https://packagephobia.com

Это предназначено для измерения дискового пространства после запуска на npm installпредмет зависимостей на стороне сервера, таких как expressили зависимости разработчика, например jest.

Вы можете узнать больше об этом инструменте и других подобных инструментах в readme здесь: https://github.com/styfle/packagephobia

Обновление 2020

«Размер без упаковки» (в основном размер публикации) доступен на веб-сайте npmjs.com вместе с «Всего файлов». Однако это не рекурсивное значение, npm installкоторое, вероятно, будет намного больше, потому что один пакет, вероятно, зависит от многих пакетов (таким образом, Package Phobia по-прежнему актуален).

Также существует ожидающий RFC для функции, которая выводит эту информацию из интерфейса командной строки.

Если вы используете webpack в качестве сборщика модулей, обратите внимание на:

• WebPack-расслоение-анализатор
• WebPack-пачка размерно-анализатор

Однозначно рекомендую первый вариант. Он показывает размер в интерактивной древовидной карте. Это поможет вам определить размер пакета в вашем связанном файле.

Другие ответы в этом посте показывают вам размер проекта, но вы можете использовать не все части проекта, например, с встряхиванием дерева. Тогда другие подходы могут не показать вам точного размера.

Попробуйте использовать размер пакета .

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

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

Если вы используете Visual Studio Code, вы можете использовать расширение под названием Import Cost .

Это расширение будет отображать в редакторе в строке размер импортированного пакета. Расширение использует webpack с babili-webpack-plugin для определения импортированного размера.

Вы можете проверить npm-module-stats . Это модуль npm, который получает размер модуля npm и его зависимостей без установки или загрузки модуля.

Использование:

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);
});

Это может показаться немного многословным, но оно решает проблему, которую вы описали должным образом.

"Быстрый и грязный" способ - использовать curl и wzrd.in для быстрой загрузки минифицированного пакета и затем определить размер файла:

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

Загрузка уменьшена, но не сжата, но вы получите хорошее представление об относительном размере пакетов при сравнении двух или более из них.

howfat - еще один инструмент, который может показать общий размер пакета:

npx howfat jasmine