Від автора: в webpack вас найбільше хвилює продуктивність? Розмір пакету занадто великий? Тоді цей пост для вас! Пройдіть ці три етапи, щоб мати уявлення про те, як оптимізувати розмір пакету. Етапи перераховано по зростаючій складності, щоб ви могли почати з верхнього і, сподіваюся, швидко його виконати.
Просто: запустіть webpack в продакшені
Перевірте, що webpack запущений в режимі продакшену. Для цього необхідно запустити webpack з прапором –p:
webpack –p
Цей маленький прапор виконує дві операції для оптимізації розміру пакету:
Активує минификацию з допомогою UglifyJs. Видаляються зайві прогалини, порожні рядки, недосяжний код і т. д.
Встановлює NODE_ENV в значення «production». Значення говорить пакетів типу React не включати дебаг код.
Середня складність: використовуйте аналізатор
В мережі повно хороших аналізаторів бандлів. Найкращі, які я використав:
https://github.com/th0r/webpack-bundle-analyzer
https://github.com/danvk/source-map-explorer
Вони працюють трохи по-різному, але в підсумку виходить те ж саме: гарне візуальне подання всіх модулів пакету. Результат від source-map-explorer виглядає так (зображення з GitHub):
Візуалізація дозволяє побачити, що є у вашому бандл. Можна порівняти розміри компонентів і залежностей. Як аналізувати вихідні дані:
Залежно більше, ніж ви думали? Чи можна їх замінити мінімалістичним/більш спеціалізованими альтернативами або переписати самому?
Ви використовуєте moment.js, в бандл всі часові пояси, але використовується один або два? Це можна пофіксити.
Використовуєте lodash? Тоді спробуйте lodash-webpack-plugin та/або babel-plugin-lodash.
Має сенс розбити бандл, щоб не всі компоненти і залежно завантажувалися на всіх сторінках? Тоді читайте далі.
Важко: розбивайте код
Розбити код — розбити бандл на маленькі частини. Ви можете запитати: «Навіщо комусь робити це? Хіба це не погано позначається на мобільних пристроях?». Щоб підвищити продуктивність на мобільних пристроях, необхідно зменшити кількість нових HTTP-з’єднань, це правда. Але плюс розбивки коду в тому, що так можна більше задіяти кеш і робити більш спеціалізовані бандли.
Розбивка бібліотек на окремі бандли
Залежно зазвичай не так часто змінюються, як продакшн-код. З допомогою розбивки коду залежності можна винести в окремий пакет. Цей пакет можна згодувати в кеш браузера на більший час, ніж код продакшену.
За посиланням можна почитати хороше керівництво. Також повинен допомогти мій пост про те, що робити з файлами бандла.
Розбивка CSS-коду
Використовуєте CSS в JS? Тоді CSS можна винести в окремий JS-бандл або CSS-файл. Плюс такий же, як і з бібліотеками: браузер може кешувати такі файли на більш довгий період.
Зацікавила тема? Читайте керівництво.
Асинхронне отримання бандлів
З допомогою webpack один бандл можна розбити на багато маленьких, після чого браузер можна автоматично асинхронно витягати необхідні бандли. Це означає, що браузер буде завантажувати тільки необхідний JS-код. Це крутий, але найскладніший метод з цього поста. Дивіться керівництво.
Висновок
Щоб оптимізувати розмір бандлів, можна виконати безліч операцій. Щось робиться швидко, що займає більше часу.
Безперечно варто звернути увагу на більш прості етапи оптимізації в webpack. Пропрацювавши перші два етапи з посту, ви можете сильно скоротити вагу файлів, витративши на це всього лише 30 хвилин.
