А стоит ли спешить с обновлением?
Вчера был выпущен пятый крупный релиз webpack. Прошло почти два года после последнего основного выпуска (4), и в этом выпуске внесено множество изменений в наиболее часто используемый сборщик модулей в экосистеме JavaScript. Если вы, как и я, начали свою фронтенд-карьеру до появления webpack, вы помните боль и разочарование от работы с такими инструментами, как gulp и grunt.
Давайте посмотрим на важные изменения и улучшения, которые появятся в новом выпуске этой невероятно популярной библиотеки.
Что нового в Webpack 5
Эта новая версия концентрируется на пяти ключевых областях.
Более быстрые сборки с постоянным кешированием
Медленная сборка - одна из самых частых жалоб разработчиков на webpack. Сборщик модулей теперь предлагает дополнительный кеш файловой системы. Это должно повысить нашу продуктивность как разработчиков за счет ускорения разработки сборок.
Меньшие размеры пакетов
Улучшено встряхивание дерева (также известное как устранение мертвого кода). В то время как предыдущие версии webpack могли удалять неиспользуемый код, версия 5 пошла еще дальше. webpack теперь может удалять код внутри модулей, что приводит к еще меньшим размерам пакетов. Чтобы узнать больше обо всех функциях оптимизации webpack 5, ознакомьтесь с официальной документацией.
Лучшее долгосрочное кеширование
После размера пакета кеширование может улучшить время загрузки вашего приложения. Благодаря кешированию посетители, возвращающиеся к вашему приложению, загружаются практически мгновенно. В webpack 5 изменения, внесенные в ваш код, которые не изменяют свернутую версию (например, комментарии или имена переменных), не приводят к недействительности кеша. Это означает, что ваши пользователи смогут дольше ощущать повышение производительности кэширования.
Критические изменения сейчас, чтобы позволить дальнейшие улучшения позже
Некоторые изменения, внесенные в эту версию, не окажут заметного влияния на производительность вашего приложения сегодня. Вместо этого они предназначены для включения новых функций и улучшений в более поздних версиях webpack 5.
Эти будущие функции включают использование http(s) импорта как module внешних. Это поможет в разработке микро-фронтендов. Чтобы узнать больше об этих новых и интересных функциях, ознакомьтесь с официальной документацией здесь.
Еще одно критическое изменение - это повышение минимальной версии Node.JS с 6 до 10.13.0. Отказ от поддержки старых версий Node.JS позволит команде упростить свой код и удалить обходной путь для поддержки этих старых версий.
webpack 5 также предлагает новый experiments параметр конфигурации с поддержкой WebAssembly, Async Web Assembly, Top Level Await и вывод вашего пакета в виде модуля (ранее это было возможно только с накоплением).
Модуль Федерация
Короче говоря, эта новая функция позволяет нескольким сборкам веб-пакетов работать вместе. Это позволяет вашему приложению динамически загружать код из другого приложения (иначе говоря, из другой сборки веб-пакета). Самым популярным приложением объединения модулей является включение архитектуры микро-интерфейса.
Подробное рассмотрение федерации модулей выходит за рамки этой статьи. Если вы хотите узнать больше, обязательно прочтите официальный пост webpack здесь.
Критические изменения
Вот краткое изложение критических изменений, внесенных в эту версию, и соответствующие советы по миграции.
Удаленные устаревшие элементы
Все элементы, отмеченные как устаревшие в версии 4, были удалены. Если ваша сборка webpack 4 выводит предупреждения об устаревании, обязательно устраните их перед обновлением.
Изменения во встроенных плагинах
Плагины IgnorePlugin и BannerPlugin принимают разные аргументы. Подробнее здесь.
Полифиллы Node.JS удалены
В предыдущих версиях webpack были включены полифиллы для собственных библиотек NodeJS, таких как crypto. Они были удалены. Вместо этого вам следует использовать библиотеки, ориентированные на интерфейс, или установить полифиллы самостоятельно.
Стоит ли вам обновиться сейчас?
Это личный вопрос, и он действительно зависит от того, как вы используете webpack в своем проекте. Большинство разработчиков, использующих webpack, используют множество плагинов. Вам необходимо убедиться, что плагины, которые вы используете, поддерживают эту новую версию.
А что насчет NextJS?
Если вы используете NextJS, вы можете перейти на webpack 5, установив версию в качестве разрешения пряжи в вашем package.json. Но опять же, если у вас есть настраиваемая конфигурация веб-пакета, вам необходимо убедиться, что ваша конфигурация работает с веб-пакетом 5.
А что насчет Create-React-App?
Большим преимуществом (и недостатком для некоторых) create-react-app является то, что нет официального способа настроить конфигурацию вашего веб-пакета. Тем из вас, кто использует CRA, придется подождать, пока скрипты реакции не будут обновлены для поддержки webpack 5. По словам участника, это должно произойти в Create-React-App версии 4.1 (исходный код).
Для получения дополнительной информации о переходе с версии 4 на 5 обязательно ознакомьтесь с официальным руководством по миграции.
Подводя итоги
Этот новый выпуск webpack заставляет меня еще больше воодушевлять будущее фронтенд-разработки. Приятно видеть новые функции и улучшения в инструменте, которым я пользуюсь каждый день. Мы должны увидеть, как его улучшения будут стимулировать инновации в сообществе в ближайшие несколько лет.
Большинство фронтенд-разработчиков не очень-то сильно трогают webpack и просто предполагают, что он «просто работает». Я уже говорил это раньше и повторю еще раз: я думаю, что это ошибка. Понимание того, как работают ваши инструменты сборки, делает вас более сильным разработчиком и бесценно при отладке ошибок.
Хотя команда webpack продолжит поддерживать версию 4, исправляя ошибки и добавляя функции, в обозримом будущем они предлагают вам перейти на версию 5. Практически с любой библиотекой (кроме, возможно, React) наступает время, когда вам нужно вносить критические изменения и улучшения архитектуры, основанные на этих критических изменениях.
Короче говоря, хотя работа с критическими изменениями раздражает, я не думаю, что это слишком большая просьба вносить некоторые изменения в конфигурацию вашего приложения каждые два года в обмен на лучшую и более быструю систему сборки.
