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 читайте в нашем гайде «Зачем нужно собирать фронтенд».
