Владислав Калачев

Что нового в Webpack 5?

1 078

Доброго времени суток, друзья. Сегодня на повестке дня последний релиз Webpack 5. Поговорим обо всех нововведениях, которыми порадовали нас разработчики Webpack после 4 версии. К ним относятся как архитектурные улучшения, так и новые функциональные возможности.

Основные нововведения, которые мы рассмотрим:

— Улучшена скорость сборки бандла благодаря оптимизации алгоритма кэширования;

— Улучшен механизм Tree Shaking и генерации кода;

— Улучшена совместимость с веб-платформой;

— Удалены полифилы Node.js модулей;

— Добавлен новый функционал Module Federation;

— Встроен загрузчик Asset modules.

Давайте рассмотрим все эти новшества поподробнее.

Улучшение скорости сборки бандла (Persistent Caching)

В Webpack 5 появилась возможность постоянного кэширования данных благодаря кэшу файловой системы. Это позволяет значительно сократить скорость сборки конечного бандла. Для того, чтобы включить данный функционал, потребуется указать следующие значения:

Пример:


module.exports = {
  cache: {
      type: 'filesystem',
    buildDependencies: {
         config: [__filename]
       }
  }
};

В объекте cache нужно указать «filesystem» для поля type, тем самым указав тип кэширования, который будет использоваться. В объекте buildDependencies необходимо добавить в поле config свою конфигурацию, чтобы анализировать кэш в случае изменения конфигурации.

Улучшен механизм Tree Shaking и генерации кода

Благодаря использованию статического анализа кода, появилась возможность построения графов зависимостей, что привело к удалению большого количества неиспользованного кода. Webpack 5 стал отслеживать вложенные свойства экспортов, это позволило улучшить tree shaking и исключить неиспользуемые и «неправильные» экспорты при получении конечного бандла. К данному улучшению также был добавлен tree shaking CommonJS-модулей.

Улучшение совместимости с веб-платформой

Было добавлено большое количество взаимодействий с веб-платформой благодаря поддержке следующих функционалов: Asset modules, Native Worker, URLs, Async modules, JSON Modules, import.meta. Данная интеграция позволяет намного удобнее производить работу с веб-платформой в Webpack 5.

Удалены полифилы Node.js модулей

В Webpack 5 были удалены полифилы для работы с Node.js. Изначально с появлением Webpack основная работа приходилась на разработку Node.js-модулей и использование полифилов с большим количеством генерированного кода было неизбежно для комфорта при разработке с Webpack. В текущее время это уже не актуально и в основном Webpack стал использоваться для разработки под браузеры. Как результат, удаление полифилов из Webpack привело к значительному уменьшению бандла.

 Добавлен новый функционал Module Federation

Благодаря данному функционалу появилась интересная возможность использовать несколько сборок для разработки. Каждая сборка не должна иметь зависимостей друг от друга, что позволяет разрабатывать их как независимые приложения. Это означает что большое SPA можно разделить на части и каждую часть отдать отдельной команде разработки, а после собрать в единое приложение. Данная фишка может в перспективе значительно улучшить разработку больших проектов. 

Встроен загрузчик Asset modules

Теперь отдельная установка file-loader, raw-loader и url-loader больше не нужна, поскольку появилась возможность для данных задач использовать встроенный загрузчик ресурсов.

Заключение

Сегодня мы разобрали основные нововведения Webpack 5. Прошлись по самым полезным из них. Имейте ввиду, что я старался указать только самые крупные из них. В статье не указано большое количество мелких изменений, которых коснулся Webpack 5. Для получения более подробной информации рекомендую воспользоваться оригинальной документаций (ссылка приложена ниже). Надеюсь, что данная статья была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Полезные материалы:

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации. 

Комментарии:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *