Минимизация размера бандла

aria-query — это библиотека для JavaScript, предназначенная для проверки соответствия элементов HTML стандартам доступности (ARIA). Она предоставляет структурированные данные о ролях, свойствах и состояниях ARIA, позволяя создавать инструменты и утилиты, которые автоматически проверяют корректность использования ARIA в веб-приложениях.

Основные экспортируемые сущности:

roles — объект, содержащий все стандартные ARIA-ролики и их атрибуты.
roleKeys — массив названий всех ролей.
elementRoles — отображение элементов HTML на возможные ARIA-ролики.
aria — объект, содержащий свойства ARIA и их допустимые значения.

Пример использования базовых экспортов:

import { roles, roleKeys, elementRoles, aria } from 'aria-query';

console.log(roleKeys.includes('button')); // true
console.log(roles.get('button').props);  // { disabled: undefined, expanded: undefined, ... }

Минимизация размера бандла при использовании

Библиотека aria-query достаточно объемная, поэтому при включении в клиентский бандл важно избегать импорта всего пакета, если нужны лишь отдельные части. Основной подход — импорт конкретных сущностей вместо всего модуля.

Пример «плохого» импорта:

import * as ariaQuery from 'aria-query';

Этот способ приводит к включению всего набора ролей и свойств в бандл, что увеличивает его размер на десятки килобайт.

Оптимальный подход — селективный импорт:

import { roles, aria } from 'aria-query';

Если нужны только роли или свойства ARIA, другие части не будут включены в бандл. Для сборщиков, поддерживающих tree-shaking (Webpack, Rollup, Vite), это снижает конечный размер бандла.

Использование Map и Set для оптимизации

roles и aria представлены как Map, что позволяет использовать эффективный доступ к данным без копирования всего объекта. При минимизации бандла важно:

Не создавать лишних копий Map или Set.
Извлекать только необходимые ключи через методы get, has и keys.

Пример:

import { roles } from 'aria-query';

const buttonProps = roles.get('button')?.props;
if (buttonProps?.disabled !== undefined) {
  console.log('Свойство disabled доступно для кнопки');
}

Такой подход не приводит к загрузке всех ролей и их свойств в память, а только нужных.

Сборка и tree-shaking

Для эффективной минимизации бандла с aria-query нужно учитывать возможности сборщика:

ES-модули — aria-query экспортирует сущности как ES6 модули, что позволяет tree-shaking.
Избегать require() — CommonJS импорт делает невозможным удаление неиспользуемого кода при сборке.
Разделение кода — использовать динамический импорт для частей функциональности, если они требуются редко.

Пример динамического импорта:

async function loadRoles() {
  const { roles } = await import('aria-query');
  return roles.get('menuitem');
}

loadRoles().then(role => console.log(role));

Примеры минимального импорта для отдельных задач

1. Проверка наличия роли для элемента:

import { elementRoles } from 'aria-query';

const divRoles = elementRoles.get('div');
console.log(divRoles.has('main')); // true или false

2. Получение допустимых значений ARIA-свойства:

import { aria } from 'aria-query';

const expandedValues = aria.get('aria-expanded');
console.log(expandedValues); // Set { 'true', 'false', undefined }

3. Выборка только ролей с конкретными свойствами:

import { roles } from 'aria-query';

const rolesWithDisabled = Array.from(roles)
  .filter(([name, details]) => 'disabled' in details.props)
  .map(([name]) => name);

console.log(rolesWithDisabled);

Этот способ позволяет использовать только необходимую информацию, не захватывая весь объем библиотеки.