Ми відкриваємо серію дописів, в яких ми зосереджуємося на полегшенні ваги наших пачок, у цьому першому дописі ми представляємо інструмент, який допоможе вам визначити, які пакети винні в "надмірній вазі" вашої програми.

Екосистема javascript неймовірна, у нас є бібліотеки для всього, це як безкоштовний шведський стіл, і тепер у нас також є інструменти зв’язування, такі як веб-пакет, який "чарівним чином" пакує все для вас.

Це чудово звучить, коли ти починаєш проект і починаєш тут і там користуватися бібліотеками, думаючи заощадити свою роботу. Раптом пора брати участь у виробництві, і ти розумієш, що мій мініфікований комплект важить 2 мегабайти! . добре, ви можете помістити його в gzip і збираєтесь завантажити, але ви добре завантажуєте браузер свого клієнта.

Чи має значення, що пучок важить багато? Відповідь може вплинути на ваш бізнес, якщо завантаження веб-програми триватиме довше, користувачі пропускатимуть її (краще скористатися програмою конкуренції, яка трохи швидша і не залишає мене сухим з ​​даними та акумулятором), Крім того, якщо ви не контролюєте свою вагу з самого початку, через кілька років у вас буде чудовисько в кілька мегабайт, що вам знадобиться вантажівка, щоб перевезти його з одного місця в інше.

Коли ми робимо збірку до виробництва (пам’ятайте, що в wepback ви можете встановити прапор для генерації зменшеного вмісту), ми можемо побачити розмір пакетів всередині папки dist.

webpack

Боже мій, 2 Мб комплект!

Якщо ми подивимось на цей генерований результат (на основі реального проекту), то виявимо, що AHHHH. У нас є два мегабайти постачальника js !, у vendor.js - це місце, куди ми скидаємо всі сторонні бібліотеки, схоже, є щось від третіх сторін, що створює важке травлення.

Перш ніж згрупувати голову для оптимізації, перше, що потрібно знати, що породжує цей шум, для цього ми будемо використовувати дуже цікавий плагін webpack, який називається: веб-пакет-аналізатор

Цей пакет можна використовувати як із командного рядка, так і налаштувати як плагін у нашому веб-пакеті. У цьому розділі ми розглянемо, як налаштувати його в webpack.config.js як плагін.

Давайте подивимося, як завантажити та налаштувати цей пакет.

Крок 1 встановіть його

Ми можемо завантажити його та налаштувати як залежність від розробки для додавання до нашого package.json

Крок 2 налаштуйте його як плагін

У верхній частині нашого webpack.config ми можемо додати до плагіна вимогу

У розділі плагіни ми можемо додати його:

Крок 3 запустіть його

Тепер нам потрібно лише виконати команду, яку ми зв’язали в package.json, щоб зробити збірку, наприклад, у нашому package.json ми можемо мати таку команду:

З командного рядка ми б виконали

Як тільки ми робимо збірку, відкривається вікно браузера, де ми можемо побачити інтерактивну карту, на якій ми можемо глибоко масштабувати та аналізувати, де знаходяться "наші лайно":

У нашому випадку (на основі реальних подій) помилка виявляється швидко, ми використовуємо бібліотеку значків, яка бере значну частину ваги нашого набору: - @

Якщо ми його усунемо, ми залишимось у:

Щойно ми завантажили понад 600 Кб через помилку.

Ми все ще худнемо? Звичайно так!

Є ще повороти, які ми можемо зробити, щоб зменшити вагу програми. У наступних публікаціях ми вдосконалимо та застосуємо методи. До якого розміру пакету ми зможемо завантажити?