Мы создали Webpack Monitor, чтобы помочь разработчикам отслеживать свои пакеты веб-пакетов в процессе разработки, выявлять сборки, в которых возникают проблемы с размером, и предоставлять информацию для принятия обоснованных решений о приоритетах оптимизации.
Мы хотели расширить существующие анализаторы, в частности превосходный webpack-bundle-analyzer, создав инструмент, который интегрируется в процесс разработки и обеспечивает анализ результатов webpack с течением времени. Разрешение пользователям возвращаться к предыдущим сборкам позволяет определить, когда пакеты стали раздутыми, какие зависимости были причиной этого и что можно с этим сделать.
Обзор
Страница обзора Webpack Monitor разделена на три раздела. Панели вверху одинаковы во всем приложении. Здесь вы получаете доступ к ключевой статистике «активной сборки» - сборки, которую вы в данный момент выбрали.
На диаграмме активы отслеживаются три самых крупных актива в вашем пакете и даются интересные сведения об эффектах оптимизации. Вы когда-нибудь создавали новый актив поставщика, не удаляя весь этот код поставщика из app.js? Конечно, есть, и это позволяет легко заметить.
Здесь указан общий размер проекта сборки, который предоставляет один способ перехода между активными сборками.
Наконец, с должным отсылкой к Webpack Visualizer диаграмма солнечных лучей дает вам всю необходимую информацию о выбранной вами сборке в красивой интерактивной графике. Все диаграммы отображаются в D3, но именно здесь можно увидеть, что отличает его от других библиотек диаграмм / визуализации.
Данные сборки
На нашей странице данных сборки мы отображаем отдельные файлы, объединенные Webpack. Независимо от размера файла, даже если это всего лишь байт, он будет включен. Потому что, если вы сократите время до интерактивности всего на несколько миллисекунд и если ваше приложение или веб-сайт используют 100 миллионов человек, вы можете сэкономить дни загрузки для своих пользователей.
Эта информация дает вам возможность принимать решения на основе данных по оптимизации вашего пакета для повышения производительности.
Переключение между сборками позволяет сравнивать изменения в отдельных файлах между сборками. Это ключ к выявлению посторонних файлов, больших библиотек, которые можно удалить, или модулей npm, которые другие разработчики могли установить другую версию. Обладая этой информацией, ваша команда может изменить эти файлы перед развертыванием, что обеспечит отличную производительность и удобство использования.
Рекомендации
Страница рекомендаций потрясающая. Вверху у нас есть сводка, которая в основном говорит вам, насколько вы можете уменьшить размер своего пакета Webpack, если примете во внимание наши рекомендации. Он также покажет вам процент того, насколько вы можете уменьшить размер вашего текущего пакета. Мало того, что под панелью отображается текущий размер вашего пакета и оптимизированный размер. А если этого было недостаточно, для быстрого ознакомления вы можете посмотреть на размер потенциальной экономии, выделенный красным.
В этот момент вы можете спросить: «Как я могу разобрать это потрясающее резюме и посмотреть, какие рекомендации предлагаются ???» Что ж, если есть способы оптимизировать файл пакета, все, что вам нужно сделать, это посмотреть прямо под сводкой, и она, по сути, покажет вам то же самое. На данный момент у нас есть две рекомендации: минимизировать с помощью Babel и удалить неиспользуемый CSS с помощью Purify CSS. Однако панель минификации отличается тем, что в ней может быть несколько полос в зависимости от того, сколько файлов JavaScript можно минимизировать. Мы даже сообщаем вам, какие файлы можно минимизировать и сколько каждый файл сохраняет в дополнение к тому, сколько вы можете сэкономить, уменьшив в целом.
Проверьте нас на Github и npm!
