Мониторинг и анализ приложения

Какие инструменты использовать для отслеживания и анализа пакета веб-пакета

Ivan Akulov

Даже если вы настраиваете веб-пакет так, чтобы сделать приложение как можно меньшим, все равно важно отслеживать его и знать, что оно включает. В противном случае вы можете установить зависимость, которая увеличит размер приложения в два раза — и вы даже не заметите этого!

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

Следите за размером пакета

Чтобы отслеживать размер вашего приложения, используйте webpack-dashboard во время разработки и размер пакета в CI.

веб-панель-панель

webpack-dashboard расширяет возможности вывода веб-пакета за счет размеров зависимостей, прогресса и других деталей. Вот как это выглядит:

Эта панель управления помогает отслеживать большие зависимости — если вы добавите одну, вы сразу увидите ее в разделе «Модули» !

Чтобы включить его, установите пакет webpack-dashboard :

npm install webpack-dashboard --save-dev

И добавьте плагин в раздел plugins конфигурации:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

или используйте compiler.apply() если вы используете сервер разработки на базе Express:

compiler.apply(new DashboardPlugin());

Не стесняйтесь экспериментировать с панелью управления, чтобы найти возможные места для улучшения! Например, прокрутите раздел «Модули» , чтобы узнать, какие библиотеки слишком велики и могут быть заменены меньшими альтернативами.

размер пакета

Bundlesize проверяет, что ресурсы веб-пакета не превышают указанные размеры. Интегрируйте его с CI, чтобы получать уведомления, когда приложение становится слишком большим:

Чтобы настроить его:

Узнайте максимальные размеры

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

2. Добавьте раздел bundlesize в package.json со следующим содержимым:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. Выполните bundlesize с помощью npx :

   npx bundlesize
   

   Это напечатает размер каждого файла в сжатом виде:

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. Добавьте к каждому размеру по 10-20%, и вы получите максимальные размеры. Эта маржа в 10–20 % позволит вам разрабатывать приложение в обычном режиме, одновременно предупреждая вас, когда его размер слишком сильно вырастет.

   Включить bundlesize

5. Установите пакет bundlesize в качестве зависимости разработки:

   npm install bundlesize --save-dev
   

6. В разделе bundlesize package.json укажите конкретные максимальные размеры. Для некоторых файлов (например, изображений) может потребоваться указать максимальный размер для каждого типа файла, а не для каждого файла:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. Добавьте скрипт npm для запуска проверки:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. Настройте CI для выполнения npm run check-size при каждом нажатии. (И интегрируйте bundlesize с GitHub, если вы разрабатываете на нем проект.)

Вот и все! Теперь, если вы запустите npm run check-size или отправите код, вы увидите, достаточно ли малы выходные файлы:

Или, в случае неудачи:

Дальнейшее чтение

• Алекс Рассел о реальном времени загрузки, на которое мы должны ориентироваться

Проанализируйте, почему пакет такой большой

Возможно, вам захочется покопаться в пакете глубже, чтобы увидеть, какие модули занимают в нем место. Встречайте webpack-bundle-analyzer :

webpack-bundle-analyzer сканирует пакет и создает визуализацию того, что находится внутри него. Используйте эту визуализацию, чтобы найти большие или ненужные зависимости.

Чтобы использовать анализатор, установите пакет webpack-bundle-analyzer :

npm install webpack-bundle-analyzer --save-dev

добавьте плагин в конфиг вебпака:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

и запустите производственную сборку. Плагин откроет страницу статистики в браузере.

По умолчанию страница статистики показывает размер проанализированных файлов (т. е. файлов в том виде, в котором они представлены в пакете). Вероятно, вы захотите сравнить размеры gzip, поскольку они ближе к тому, что испытывают реальные пользователи; используйте боковую панель слева для переключения размеров.

Вот что нужно искать в отчете:

• Большие зависимости. Почему они такие большие? Существуют ли более мелкие альтернативы (например, Preact вместо React)? Используете ли вы весь код, который он содержит (например, Moment.js включает множество локалей , которые часто не используются и могут быть удалены )?
• Дублированные зависимости. Вы видите одну и ту же библиотеку, повторяющуюся в нескольких файлах? (Используйте, например, параметр optimization.splitChunks.chunks — в веб-пакете 4 — или CommonsChunkPlugin — в веб-пакете 3 — чтобы переместить его в общий файл.) Или в пакете есть несколько версий одной и той же библиотеки?
• Похожие зависимости. Существуют ли подобные библиотеки, выполняющие примерно ту же работу? (Например, moment и date-fns или lodash и lodash-es .) Попробуйте использовать один инструмент.

Также ознакомьтесь с великолепным анализом пакетов веб-пакетов Шона Ларкина.

Подведение итогов

• Используйте webpack-dashboard и bundlesize чтобы быть в курсе размера вашего приложения.
• Узнайте, что увеличивает размер с помощью webpack-bundle-analyzer