Ср. Дек 1st, 2021

Конфигурации в webpack в 2021 году

От создателя: Webpack — это сборщик модулей JavaScript, который конвертирует веб-ресурсы, такие как файлы HTML, CSS, JavaScript и SVG, и соединяет воединыжды их в меньшую группу файлов. Webpack также помогает в разбиении на части (разделение на более маленькие блоки) и управлении зависимостями кода, чтоб гарантировать, что код, который должен загружаться первым, сделает это.

Конфигурации в webpack в 2021 году

Как работает webpack

В этой статье мы перейдем к рассмотрению неких новых функций, на которые стоит направить внимание в webpack в 2021 году, но поначалу мы рассмотрим, что нового было в webpack в 2020 году.

webpack V4 — V5: принципиальные изменения

В октябре 2020 года была выпущена более новенькая версия webpack: webpack 5. В этой версии удалены все устаревшие элементы в V4 и исправлены критичные ошибки, чтобы повысить уровень архитектуры webpack для будущих улучшений.

Другие достойные внимания особенности версии 5:

Помощь долгосрочного кэширования — новые алгоритмы поддержки длительного кэширования включены по умолчанию в рабочем режиме.

Реальный хеш содержимого — ранее в webpack использовался только хеш внутренней структуры. Webpack 5 будет использовать реальный хэш содержимого файла при использовании [contenthash], что положительно воздействует на долгосрочное кеширование, когда в файл вносятся только незначительные изменения.

Модульная структура — webpack 5 поставлялся с новейшей функцией, которая позволяет нескольким сборкам веб-пакетов работать вкупе. Смотрите здесь полный список изменений.

Несмотря на то что 2020 год был большим годом для webpack, есть еще чего нового, о чем мы побеседуем в следующих разделах. Обратите внимание, что эти обновления имеют возможность быть изменены в зависимости от повсевременно меняющегося мира веб-разработчиков.

Дорожная карта webpack 2021

Усовершенствованная поддержка ESM

Поскольку в 2015 году был представлен модуль ECMAScript (ESM), он стал стандартным механизмом для повторного использования кода в очень фрагментированных приложениях JavaScript.

Чтоб улучшить поддержку ESM, команда webpack планирует внести некие важные обновления.

Самостоятельно выполняемые куски

Одна из самых увлекательных функций webpack — это разделение кода. Эта функция позволяет поделить код на несколько пакетов, которые вы сможете загружать по запросу или параллельно.

На актуальный момент динамически загружаемые фрагменты в webpack обычно служат контейнером для модулей и никогда не делают код модуля напрямую. Например, написание:

JavaScript

Будет компилироваться приблизительно так:

JavaScript

В большинстве случаев это нельзя поменять, но команда webpack рассматривает некоторые случаи, когда webpack мог бы сгенерировать блок, который конкретно выполняет содержащийся модуль. Это может привести к наименьшему количеству генерируемого кода.

ESM импорт и экспорт

Несмотря на то что уже существует плагин для генерации экспорта ESM, команда webpack рассматривает возможность прибавления встроенной поддержки этой функции, которая может быть полезна, когда вы решите интегрировать пакеты webpack в среды загрузки ESM либо встроенные скрипты.

Команда также учитывает абсолютные URL-адреса при импорте. Это очень комфортно при использовании внешних сервисов, которые предлагают свои API в виде модулей EcmaScript. Вот пример:

JavaScript

Такая функция поможет роскошно обрабатывать ошибки при внешних зависимостях.

Библиотека ESM

Команда webpack также постарается внести улучшения в объединение с внедрением библиотек ESM и добавит специальный режим, который не применяет разбиение на части, а заместо этого генерирует обработанные модули, которые имеют возможность быть подключены через импорт и экспорт ESM.

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

Предупреждения о серьезном режиме

Рано или поздно команда webpack планирует гарантировать, что при разработке пакета ESM весь содержащийся код будет переведен в серьезный режим. Хотя это может не быть неувязкой для многих модулей, есть несколько старенькых пакетов, которые могут иметь проблемы с различной интерпретацией, потому было бы неплохо увидеть предупреждения для их.

Производительность SourceMap

SourceMap обеспечивает метод отображения кода в сжатом файле назад в исходное положение в исходном файле. Другими словами, он связывает уменьшенную версию ресурса (CSS либо JavaScript) с исходной авторской версией. Эта утилита помогает отлаживать приложения даже после того, как ресурсы были сжаты / оптимизированы.

Внедрение SourceMap в webpack в настоящее время достаточно затратно из-за проблем с производительностью, потому команда webpack будет стремиться улучшить это в 2021 году. Они также будут стремиться обновить / сделать лучше плагин terser, который является минимизатором webpack по умолчанию в webpack 5.

Поле экспорта / импорта package.json

Node.js v14 поставлялся с поддержкой поля экспорта в package.json . Эта функция позволяет вам прямо определять точки входа для пакета либо условно определять точки входа для каждой среды либо разновидности JavaScript (TypeScript, Elm, CoffeeScript и т. Д.). В более позднем выпуске приватный импорт также поддерживался в Node.js (аналогично полю экспорта в package.json).

На сегодняшний момент webpack 5 поддерживает только функцию экспорта, даже с дополнительными критериями, такими как указание производства / разработки. Поля импорта для приватного импорта — еще одна функция, на которую стоит направить внимание в 2021 году.

HMR для модульной структуры

Жгучая замена модулей (HMR) работает путем подмены, добавления или удаления модулей, пока приложение все еще работает, без необходимости полной перезагрузки. Это может существенно ускорить разработку, сохранив состояние приложения, которое было бы потеряно при полной перезагрузке. Не считая того, он мгновенно обновляет странице, когда в начальный код вносятся изменения, что очень похоже на изменение стилей конкретно в инструментах разработчика браузера.

Webpack 5 поставлялся с новейшей функцией под названием “Module Federation”. Эта функция позволяет интегрировать несколько сборок вкупе во время выполнения. В настоящее время HMR поддерживает только одну сборку за раз, и обновления не имеют возможность перемещаться между сборками. Команда webpack будет работать над улучшением обновлений HMR, чтоб они перемещались между различными сборками, что упростило бы разработку приложений для федерации.

Система подсказок

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

Пример подсказки может смотреться примерно так: «Знаете ли вы, что при добавлении X конфигурации в файл Y вы можете его очистить?»; либо «Легко закодировать пробел с помощью функции пробела».

WebAssembly

Согласно официальной документации , WebAssembly (сокращенно Wasm) — это «двоичный формат инструкций для виртуальной машины на базе стека». Это означает, что вы сможете создавать свое программное обеспечение с помощью языков программирования, таких как Rust, C ++ и Python, и предоставить его конечному юзеру в браузере с почти нативной производительностью.

В текущей версии webpack WebAssembly является экспериментальной и по умолчанию не включен. Помощь по умолчанию — это то, что команда webpack будет надежды добавить в этом году.

Заключение

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

Создатель: Elijah Asaolu

Редакция: Команда webformyself.

Докладывает webformyself.com

от Admin

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

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