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

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

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

Дотримуйтесь цих 10 кроків, щоб зменшити розмір вашого бандла:

  • Tree shaking: видаляє невикористаний код. Використовуйте синтаксис ES Module, щоб це працювало.
  • Code splitting: розбиває ваш код на менші частини.
  • Dynamic imports: завантажує код лише тоді, коли він потрібен користувачеві.
  • Image optimization: використовуйте трансформації на основі URL замість великих бібліотек.
  • Dependency auditing: замінюйте важкі бібліотеки на легші.
  • Minification: стискає ваші файли коду.
  • Compression: використовуйте Brotli для кращих результатів, ніж Gzip.
  • Dead code elimination: видаляє недосяжні гілки коду.
  • Lazy loading: відкладає завантаження некритичних компонентів.
  • Polyfill pruning: надсилайте лише ті поліфіли, які потрібні вашим користувачам.

Три методи найкраще працюють разом. Lazy loading, polyfill pruning та dead code elimination можуть зменшити ваш розмір на 15–30%.

Аудитуйте свої залежності перед їх встановленням. Використовуйте npx bundle-phobia для перевірки розмірів.

Наприклад: • date-fns (13 КБ) краща за moment.js (67 КБ). • dayjs (2 КБ) — чудова альтернатива для форматування дат. • Використовуйте lodash-es замість повної бібліотеки lodash.

Перевіряйте свій прогрес за цими показниками: • Загальний розмір JS: прагніть до менше ніж 120 КБ. • LCP: прагніть до менше ніж 2,5 с. • TTI: прагніть до менше ніж 3,5 с.

Уникайте цих помилок: • Розгортання development-збірок замість production-збірок. • Імпорт цілих бібліотек, коли вам потрібна лише одна функція. • Забування увімкнути стиснення Brotli на вашому сервері.

Якщо ви використовуєте tree shaking, code splitting та dependency auditing, ви зможете зменшити обсяг переданих даних на 50–70% за один спринт.

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