size-limit

Вот здесь я писал про source-map-explorer и о том, как с его помощью анализировать размер бандла. Но, чтобы не приходилось анализировать бандл, лучше предотвратить его раздувание.

Это можно сделать на этапе CI с помощью size-limit.

Как использовать❓

1. Устанавливаем size-limit и плагин @size-limit/file, необходимый для анализа web-приложений.

npm install --save-dev size-limit @size-limit/file

2. Добавляем когфиг size-limit в package.json

  "size-limit": [
    {
      "limit": "35 kB",
      "path": "dist/app-*.js",
      "gzip": true
    }
  ],

3. Добавляем запуск size-limit в скрипт, который вы запускаете на CI

  "scripts": {
    "size": "npm run build && size-limit",
    "test": "vitest && eslint . && npm run size"
  }

Если вы пользуетесь гитхабом, то можете использовать GitHub action, который добавляет в качестве комментария изменение размера бандла.

Также size-limit поддерживает задание временных лимитов на исполнение вашего кода и использует для этого “безголовый хром”.