Главная » Статьи » Изменения в webpack в 2021 году

Изменения в webpack в 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 обычно служат контейнером для модулей и никогда не выполняют код модуля напрямую. Например, написание:

import("./module")

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

__webpack_load_chunk__("chunk-containing-module.js").then(() => __webpack_require__("./module"))

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

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

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

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

import { event } from "https://analytics.company.com/api/v1.js" // Changes to: import("https://analytics.company.com/api/v1.js")

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

Библиотека 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

Источник: blog.logrocket.com

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