Все статьи | Разработка

Вышел Webpack 5

Вышел Webpack 5 главное изображение

10 октября вышел webpack 5. Новая версия включает архитектурные улучшения и критичные изменения. Работа над новой версией продолжается, поэтому при обновлении можно столкнуться с проблемами и багами. Тем не менее обновиться до пятой версии и оценить её преимущества можно уже сегодня.

На чём сфокусирован релиз webpack 5

При разработке новой версии команда webpack сфокусировалась на следующем:

  • Повышение скорости сборки благодаря Persistent Cashing
  • Улучшение долгосрочного кэширования
  • Оптимизация размеров бандлов с помощью Tree Shaking
  • Улучшение совместимости с веб-платформами
  • Очистка внутренних структур, которые оставались в подвешенном положении с момента внедрения тех или иных фич в четвёртой версии
  • Подготовка к появлению новых фич — для этого сейчас выполнены критичные обновления. Это позволит в будущем использовать webpack 5 как можно дольше

Основные изменения

Команда webpack в числе основных изменений в пятой версии называет удаление элементов, отмеченных как устаревшие в четвёртой версии. Также появились новые устаревшие элементы. Например, при использовании require.include, который стал устаревшим, webpack по умолчанию будет показывать предупреждение.

В новой версии удаляются автоматические полифилы для Node.js. Раньше webpack фокусировался на возможности запуска большинства модулей Node.js в браузере. Сейчас ситуация изменилась, и многие модули создаются исключительно для использования на фронтенде.

У нас есть курс «JS: Настройка окружения», который научит вас готовить среду для разработки проектов. Начинайте учиться в удобное время — курс доступен сразу после регистрации!

Улучшение долгосрочного кэширования также отмечается среди основных изменений. Для этой цели добавлены новые алгоритмы, которые включены по умолчание в режиме production:

  • chunkIds: "deterministic"
  • moduleIds: "deterministic"
  • mangleExports: "deterministic"

Эти алгоритмы присваивают цифровые идентификаторы и имена модулям, чтобы обеспечить возможность детерминированного экспорта.

Читабельные идентификаторы чанков, включённые по умолчанию в режиме разработки — ещё одно важное изменение в webpack 5. А новая фича Module Federation позволяет нескольким сборкам работать вместе.

Информацию о других изменениях и их подробное описание можно найти в огромном посте, посвящённом релизу webpack 5.

Справка

Webpack — сборщик модулей JavaScript. Он формирует готовый для загрузки в браузер файл или набор файлов. Webpack де-факто — стандартный инструмент сборки фронтенда. Подробнее о сборке фронтенда и webpack читайте в нашем гайде «Зачем нужно собирать фронтенд».

Аватар пользователя Дмитрий Дементий
Дмитрий Дементий 13 октября 2020