Анализ размера npm пакета.

Опубликовано в JavaScript, NodeJS • 04 ноября 2019 г. • 1 мин. на чтение

Решил по аналогии с lodash посмотреть на импорты из ramda и наткунлся на сайт анализа npm пакетов bundlephobia:

  • Показывает общий размер пакета
  • Показывает tree-shakeable

bundlephobia-screenshot

Начиная с версии 25 у ramda с импортами проблем нет, на bundlephobia можно посмотреть подробнее.

import { path, has } from 'ramda';  // 1.7 kb

cli

Еще есть инструмент командной строки cost-of-modules, который показывает общий размер зависимостей из package.json

npx cost-of-modules --no-install --less

┌───────────────────────────┬─────────────┬────────┐
│ name                      │ children    │ size   │
├───────────────────────────┼─────────────┼────────┤
│ @angular/compiler         │ 1           │ 26.88M │
├───────────────────────────┼─────────────┼────────┤
│ @angular/core             │ 1           │ 24.77M │
├───────────────────────────┼─────────────┼────────┤
│ @angular/common           │ 1           │ 13.81M │
├───────────────────────────┼─────────────┼────────┤
│ rxjs                      │ 1           │ 4.88M  │
├───────────────────────────┼─────────────┼────────┤
│ @angular/animations       │ 1           │ 4.52M  │
├───────────────────────────┼─────────────┼────────┤
│ @angular/router           │ 1           │ 4.51M  │
├───────────────────────────┼─────────────┼────────┤
│ angular-cli-ghpages       │ 55          │ 4.06M  │
├───────────────────────────┼─────────────┼────────┤
│ @angular/forms            │ 1           │ 4.06M  │
├───────────────────────────┼─────────────┼────────┤
│ @ngx-prism/core           │ 1           │ 2.68M  │
├───────────────────────────┼─────────────┼────────┤
│ @angular/platform-browser │ 1           │ 2.61M  │
├───────────────────────────┼─────────────┼────────┤
│ + 7 modules               │             │        │
├───────────────────────────┼─────────────┼────────┤
│ 17 modules                │ 48 children │ 98.46M │
└───────────────────────────┴─────────────┴────────┘

PS

Расширения VS Code:

  • Import Cost
    Показывает размер импортируемого пакета

  • Depcheck
    Выделяет в package.json файле неиспользуемые зависимости.

  • Version Lens
    Показывает информацию о версии пакета

Похожие записи

NPM. Разница между тильдой(~) и крышкой(^) в package.json

Тильда(~) подбирает последнюю минорную версию пакета (последнюю цифру), например ~7.3.3 найдет последнюю 7.3.x, допустим 7.3.12 но не 7.4.0.

Крышка(^) подбирает последнюю мажорную версию пакета (среднюю цифру), например ^7.3.3 найдет последнюю 7.x.x, допустим 7.4.0 но не 8.0.0.

npm semver calculator

Semver check

19 октября 2017 г. в NodeJS

HTML атрибуты и DOM свойства

  • Значение HTML атрибута указывает начальное значение;
  • Значение DOM свойства является текущим значением;
  • Атрибуты инициализируют DOM свойства.

RxJS. Delay from array 

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);

Добавить css link и js script динамически 

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
link.integrity = 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'; // необязательно
link.crossOrigin = 'anonymous'; // необязательно
document.head.appendChild(link);

const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'; // необязательно
s...