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

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

Ivan Akulov

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

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

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

Для отслеживания размера приложения используйте webpack-dashboard во время разработки и bundlesize в CI.

webpack-панель инструментов

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

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

Чтобы включить его, установите пакет 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 проверяет, что ресурсы Webpack не превышают заданные размеры. Интегрируйте его с 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:

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

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

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

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

Вот на что следует обратить внимание в отчете:

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

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

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

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