Аналізатор webpack stats

Знайдіть, які пакети та модулі займають найбільше місця у webpack-бандлі.

Введення

Рядків для відображенняГрупувати заФільтр за точкою входу або чанкомПоказувати стиснутий розмір, якщо доступнийПоказувати частку від загального розміруПомічати пакети, зібрані у кількох версіяхФормат виводу

Вихід

Аналізатор webpack stats

Згенеруйте stats.json з webpack (`webpack --json > stats.json`, або додайте `stats: { modules: true }` у конфіг), і вставте його сюди, щоб побачити, які саме пакети та модулі роздувають ваш бандл. Це найшвидший спосіб відповісти на запитання "чому мій бандл такий великий" без встановлення плагіна bundle-analyzer або пересборки зі спеціальними прапорцями — звіт читає JSON, який у вас уже є.

Груповуйте звіт за пакетами node_modules, щоб побачити, яка залежність коштує дорожче за все; за папками, щоб побачити, яка частина вашого вихідного коду найважча; або залиште його без групування, щоб перевірити окремі модулі один за одним. Опція «рядків для відображення» обмежує довгий звіт найбільшими порушниками; частка розміру показує розмір кожного рядка в контексті всього бандла; а якщо ваш stats.json містить поле стиснутого розміру для кожного модуля (gzipSize або sizeGzip), включення колонки стиснутого розміру показує обидва числа поруч. Фільтрація за точкою входу або назвою чанка обмежує все одним бандлом, що корисно, коли додаток має більше одного вихідного файла.

Інструмент також помічає пакети, які з'являються в кількох шляхах встановлення node_modules — це часто означає, що дві залежності вимагають несумісні версії однієї бібліотеки, і webpack закінчує тим, що відправляє обидві копії. Ці рядки помічені у виводі, щоб їх було легко помітити навіть у довгому звіті. Виберіть табличний вивід для читаного звіту або CSV для вставлення в електронну таблицю, якщо ви відстежуєте розмір бандла з часом.

Все працює у вашому браузері: stats.json аналізується локально й ніколи не завантажується нікуди, тому його безпечно використовувати з власницькою кодовою базою. Скопіюйте результат, завантажте його як .txt-файл або відправте прямо у введення іншого інструменту, щоб продовжити роботу.

FAQ

Як згенерувати stats.json?

Запустіть webpack з прапорцем `webpack --json > stats.json`, або додайте `stats: { modules: true }` у конфіг webpack, щоб компілятор виводив дані модулів. Інструменту потрібен масив "modules" верхнього рівня.

Що показує групування за пакетом, чого не показує групування за папкою?

Групування за пакетом об'єднує все файли під node_modules/react (наприклад) в один рядок, щоб ви могли побачити загальний розмір залежності. Групування за папками натомість показує ваші власні каталоги вихідного коду, що більш корисно для пошуку занадто важкої функції у вашому коді.

Чому це попереджує про "дублюючи" пакети?

Коли дві залежності вимагають різні версії однієї бібліотеки, npm або yarn можуть вкласти другу копію в node_modules замість дедублікації. Цей інструмент виявляє назву пакету, яка з'являється в кількох шляхах встановлення, та помічає її, оскільки видалення дубліката часто є простим способом зменшити розмір бандла.

Показує він реальні розміри gzip, якщо stats.json їх не містить?

Ні. Стиснутий розмір показується лише коли ваш stats.json уже містить поле gzipSize або sizeGzip для кожного модуля — інструмент ніколи не стискає нічого сам, оскільки це означало б повторне запуск етапу збірки. Без цього поля колонка стиснутого розміру показує прочерк.

Мій stats.json завантажується кудись?

Ні. Аналіз та синтаксичний аналіз виконуються повністю у вашому браузері — файл ніколи не залишає ваш пристрій.

Аналізатор webpack stats

Пов'язані інструменти

Аналізатор webpack stats

FAQ