Как уменьшить размер вашего 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