Встроенные API браузера заменяют популярные пакеты npm в 2026 году
Объясняется, как встроенные функции JavaScript и CSS, такие как Signals, оператор pipeline, Temporal и позиционирование Anchor, заменяют распространённые пакеты npm.
Стоит на мгновение внимательно просмотреть свой собственный файл package.json: сколько из указанных там элементов существуют лишь для имитации функционала, который браузер уже научился выполнять сам?
В течение большей части последних десяти лет стандартным решением практически любой проблемы фронтенда было «взять какой-нибудь пакет». Нужна система управления состоянием? Используйте Redux, Zustand или MobX. Нужны функции для работы с датами? Moment или dayjs. Нужны вспомогательные функции? lodash. Нужна анимация? GSAP или Framer Motion. Каждая фреймворковая платформа накапливала свой собственный набор «клеевого» кода для устранения недостатков системы.
К 2026 году эта тенденция меняется быстрее, чем осознают большинство команд. TC39 и крупные производители браузеров на протяжении последних нескольких лет постепенно создают нативные аналоги для целых категорий инструментов сторонних разработчиков. Ниже перечислены пять пакетов, которые вы можете серьезно рассмотреть к удалению из своих зависимостей прямо сейчас, плюс еще два, которые только наполовину устарели.
1. Библиотеки управления состоянием — нативные Signals только что появились
Заменяет: Redux, Zustand, MobX, Recoil, Jotai, а также встроенные механизмы реактивности фреймворков, такие как собственные реактивные ссылки Vue
Заменяется на: стандартизированные примитивы Signal (State, Computed и вспомогательный инструмент подписки sub)
Немногие проблемы так сильно разделили разработку фронтенда, как выбор способа управления состоянием. Экосистема React прошла путь от Redux к Zustand, затем к Jotai и Recoil. Vue создала собственные примитивы реактивности, а позже добавила сверху Pinia. Solid и Svelte с самого начала были построены на концепции сигналов. Каждая фреймворковая платформа придумала собственную версию примитива реактивности, из-за чего повторное использование логики управления состоянием между фреймворками было практически невозможно.
Это ограничение смягчилось в 2026 году, когда предложение TC39 о нативных сигналах было реализовано. Теперь примитив реактивности находится непосредственно внутри движка JavaScript:
// No library. This runs in the browser as-is.
const counter = new Signal.State(0);
const doubled = new Signal.Computed(() => counter.get() * 2);
Signal.sub(() => {
console.log(`count: ${counter.get()}, doubled: ${doubled.get()}`);
});
counter.set(1); // triggers the subscription automatically
Вот что действительно даёт такой сдвиг:
- Ваша логика управления состоянием может быть создана один раз и использована везде — React, Vue, Solid и Svelte могут читать данные из одного и того же основного примитива
Некоторые инженеры рассматривают это как завершение десятилетнего противостояния между фронтенд-фреймворками. Как только реактивный ядро станет общим для всех экосистем, оставшиеся различия между фреймворками сводятся к синтаксису шаблонов и структуре компонентов — а не к механизмам распространения обновлений состояния.
2. lodash — оператор конвейера покончил с «кузеном ада вызовов»
Заменяет: lodash, ramda и большинство случаев использования _.chain()
Заменяется на: оператор конвейера, |>
Вероятно, вы уже писали что-то подобное раньше:
const result = fn3(fn2(fn1(data)));
Такой вид вложенных вызовов функций — когда приходится читать код снаружи внутрь, чтобы понять реальный порядок выполнения — уже давно считается одной из главных причин плохой читаемости кода на JavaScript. Функция _.chain() из lodash раньше помогала скрыть эту проблему, но для получения более четкого порядка вызовов приходилось использовать всю библиотеку целиком.
К 2026 году оператор пайплайна достиг 4-й стадии в ES2026. Теперь тот же выражение читается в естественном порядке сверху вниз:
const result = data
|> fn1
|> fn2
|> fn3;
Благодаря встроенной поддержке await асинхронные пайплайны стали почти такими же, как скрипты в шелл-среде:
const user = userId
|> fetchUser
|> await
|> extractProfile
|> await
|> formatOutput;
Оператор пайпинга решает проблему читаемости кода, тогда как lodash в основном решал более старую проблему отсутствия у языка функциональных инструментов. Теперь, когда пайпинг встроен в язык, методы Array.prototype совершенствовались, а функция structuredClone стала доступна повсеместно, обоснование существования lodash значительно сократилось. Если в 2026 году он всё ещё присутствует среди ваших зависимостей, его удаление, вероятно, является самым простым способом уменьшения размера пакета.
3. dayjs и moment — APITemporal достигает 98% покрытия браузерами
Заменяет: moment.js, dayjs и date-fns в большинстве случаев использования
Заменяется на: API Temporal
Эта запись является наименее спорной в списке. moment.js уже много лет находится в режиме только технического обслуживания, а даже «легкий» dayjs всё равно увеличивает размер бандла более чем на 2 КБ. Тем временем API Temporal покрывает 98% браузеров.
// dayjs
const d = dayjs('2026-09-11').add(1, 'month').format('YYYY-MM-DD');
// Temporal
const d = Temporal.PlainDate.from('2026-09-11').add({ months: 1 }).toString();
Temporal — это не только более чистый синтаксис, но и устранение реальных ошибок, с которыми сталкивались библиотеки для работы с датами на протяжении многих лет:
- Обработка часовых поясов встроена, поэтому не требуется отдельный плагин для часовых поясов
- Поддержка календарных систем встроена, включая негригорианские календари
- Экземпляры являются неизменяемыми, что избавляет от классической проблемы moment.js с случайной модификацией объекта, который казался неприкосновенным
- Размер бандла сокращается на 10–50 КБ
Для проектов с большим количеством пользователей на мобильных устройствах сокращение размера файла на 10–50 КБ — это не просто приятная дополнительность, а прямой путь к улучшению показателя LCP.
4. Popper.js и Floating UI — позиционирование анкоров теперь реализуется через встроенный CSS
Заменяет: Popper.js, Floating UI, Tippy.js
Заменено на: позиционирование анкоров в CSS
Если вы когда-либо создавали подсказки, вы знаете, с чем это связано. Необходимо, чтобы выпадающее окно появлялось прямо под кнопкой. Традиционный способ — использование свойства position: absolute, ручный расчёт значений top и left, а также настройка обработчиков событий scroll и resize, чтобы элемент не смещался. Или же приходится использовать Popper.js или Floating UI, что добавляет ещё десяток килобайт лишнего объёма только для решения проблемы позиционирования.
К 2026 году CSS Anchor Positioning решает эту проблему на уровне платформы:
/* Step 1: name the anchor element */
.button {
anchor-name: --my-trigger;
}
/* Step 2: pin the floating element to it */
.tooltip {
position: anchor(--my-trigger);
inset-area: bottom; /* below the anchor */
}
Вот и всё — полное решение. Никакого JavaScript, никаких ручных расчётов для абсолютного позиционирования, никаких внешних библиотек. Представьте себе Anchor Positioning как GPS-фиксатор для элементов интерфейса, находящихся в состоянии плавания: направьте его на кнопку-триггер, и элемент останется на месте независимо от того, как прокручивается страница или меняется размер окна.
5. Sass и PostCSS — встроенное вложение, @layer и @scope
Заменяет: Sass, Less, PostCSS и их экосистему плагинов
Заменяется на: встроенное в CSS вложение, @layer и @scope
Было время, когда использование Sass и Less казалось обязательным. Переменные, вложение, миксины, повторно используемые функции — обычный CSS просто не предлагал ничего подобного. Но в 2026 году это уже не так.
Встроенное вложение:
.card {
background: white;
& .title { font-weight: 600; }
&:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
}
@layer для контроля порядка каскадирования стилей:
@layer reset, base, components, utilities;
@scope для легкой изоляции стилей:
@scope (.card) to (.card__content) {
:scope { border-radius: 8px; }
}
OKLCH стал стандартным форматом цветов:
:root {
--color-primary: oklch(0.65 0.2 250);
--color-hover: oklch(from var(--color-primary) calc(l - 0.1) c h);
}
Появились контейнерные запросы, точная выравнивание текста с помощью text-box, позиционирование по братьям элементов через sibling-index() и анимации, зависящие от прокрутки — все эти функции будут стабильно работать во всех браузерах к 2026 году — в результате Sass перестал быть обязательным инструментом и превратился в факультативный элемент для большинства проектов. Если он по-прежнему автоматически добавляется в ваш стек инструментов, стоит проверить, сколько из функций, для которых вы им пользуетесь, теперь реализовано нативно.
Два пакета, которые заменены лишь частично
У каждого пункта в этом списке еще нет полной нативной замены. Два из них близки к этому, но платформа еще не полностью их догнала.
Библиотеки анимации — GSAP и Framer Motion против встроенных переходов View. API View Transitions стал стабильным с React 19.3, и его компонент <ViewTransition> может автоматически анимировать элементы при их появлении, исчезновении, перемещении или изменении размера. Анимация, запускаемая прокруткой страницы с помощью animation-timeline: scroll(), позволяет создавать индикаторы прогресса, эффекты параллакса и плавное появление элементов без использования JavaScript. Тем не менее для сложных, вручную спланированных анимационных последовательностей — тех, в которых специализируется GSAP — встроенные инструменты всё ещё не являются полноценной заменой.
Инференс ИИ — ONNX Runtime Web против WebNN. Для инференса моделей в браузере API WebNN позволяет напрямую использовать ускорение NPU на уровне операционной системы, избавляя от необходимости загружать десятки мегабайт кода ONNX Runtime.
const context = await navigator.ml.createContext();
const builder = new MLGraphBuilder(context);
// build the inference graph...
const output = await context.compute(graph, inputs);
Ограничение: WebNN по-прежнему не пользуется полной поддержкой браузеров, поэтому ONNX Runtime Web пока остается более надежным вариантом.
Удаление всех пяти этих категорий из кодовой базы среднего размера может сократить объем зависимостей на 100–300 КБ. При медленном мобильном соединении такое сокращение может привести к ускорению загрузки страницы на 1–2 секунды.
Вывод
Разработка фронтенда в 2026 году характеризуется возрождением подходов, основанных на нативных платформах. Комитет TC39 и движки браузеров захватывают те функции, которые раньше принадлежали исключительно экосистеме npm — управление состоянием, функциональные вспомогательные инструменты, обработка дат, позиционирование элементов и предварительная обработка CSS. Проблемы, которые раньше требовали использования сторонних пакетов, теперь решаются непосредственно внутри браузера.
JavaScript начинает выглядеть как по-настоящему самодостаточный язык платформенного программирования. Необходимой навыком является не глубокая экспертиза в какой-либо конкретной фреймворке или библиотеке, а умение определять, когда платформа уже достаточна, а когда необходимы дополнительные зависимости.
Посмотрите, пожалуйста, на ваш файл package.json: сколько строк вы можете удалить сегодня?
Связанные статьи
- Как устранить проблемы соревновательных условий: почему техника дебаунсинга не помогает в интерфейсах поиска и четыре практических решения — Узнайте, почему одного дебаунсинга недостаточно для предотвращения замены свежего состояния интерфейса устаревшими ответами API, и ознакомьтесь с четырьмя практическими способами обеспечения правильного порядка выполнения запросов.