Як зменшити розмір JavaScript-бандла на 70%

Більшість вебдодатків надсилають занадто багато коду. Середня сторінка завантажує 1,7 МБ JavaScript. Розробники використовують лише 35% коду, який вони випускають.

Менші бандли підвищують швидкість. Ви покращуєте показники Largest Contentful Paint та Time to Interactive.

Дотримуйтесь цих 10 кроків, щоб зменшити розмір.

  1. Tree shaking Видаляйте невикористані експорти. Використовуйте синтаксис ES Module. Додайте "sideEffects": false у ваш package.json. Це видаляє близько 18% невикористаного коду.

  2. Code splitting Розділяйте свій код на менші частини (chunks).

  3. Dynamic imports Завантажуйте код лише тоді, коли він потрібен користувачам. Використовуйте lazy loading для маршрутів. Це може зменшити початковий розмір бандла на 28%.

  4. Оптимізація зображень Використовуйте трансформації на основі URL від CDN. Припиніть використовувати великі inline SVG.

  5. Аудит залежностей Перевіряйте розмір пакетів за допомогою npx bundle-phobia. • Використовуйте date-fns (13 КБ) замість moment.js (67 КБ). • Використовуйте lodash-es замість lodash. • Використовуйте dayjs (2 КБ) для простих дат.

  6. Мініфікація Видаляйте зайві пробіли та символи. Більшість бандлерів роблять це автоматично.

  7. Стиснення Використовуйте Brotli замість Gzip. Brotli стискає файли на 15–25% краще.

  8. Видалення мертвого коду Видаляйте код, до якого комп'ютер ніколи не зможе дістатися.

  9. Lazy loading компонентів Відкладайте завантаження частин сторінки, які знаходяться нижче першого екрана (below the fold).

  10. Очищення поліфілів Використовуйте @babel/preset-env. Надсилайте лише ті поліфіли, які дійсно потрібні браузерам ваших користувачів.

Припиніть робити ці помилки:

  • Надсилання збірок для розробки (development builds). Завжди використовуйте NODE_ENV=production.
  • Імпорт цілих бібліотек. Замість цього імпортуйте конкретні функції.
  • Ігнорування аналізу. Використовуйте webpack-bundle-analyzer, щоб побачити свої великі чанки.
  • Забування про стиснення. Нестиснуті файли у 5 разів більші за файли Brotli.

Відстежуйте свій прогрес за допомогою цих цілей:

  • Загальний розмір JS: менше 120 КБ.
  • LCP: менше 2,5 с.
  • TTI: менше 3,5 с.

Спочатку зосередьтеся на tree shaking, code splitting та аудиті. Ці три кроки часто забезпечують скорочення на 50–70% за один спринт.

Джерело: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g