jQuery 4.0: модульная архитектура и оптимизация после 10 лет ожидания

hannadev

jQuery 4.0 наконец вышла после почти десяти лет с релиза версии 3.0. Эта версия фокусируется на модульной архитектуре через ES-модули и оптимизации, которые уменьшают размер библиотеки и улучшают совместимость с современными инструментами. Мы разберём ключевые изменения, чтобы понять, как они помогут обновить старые проекты без больших переделок.

Релиз решает проблемы устаревшего кода и поддержки древних браузеров. Теперь jQuery легче интегрируется в Vite или webpack, а безопасность повышается за счёт Trusted Types. Это timely обновление для проектов, где jQuery всё ещё в ходу на 70% топ-сайтов.

Модульная архитектура на ES-модулях

Переход на ECMAScript Modules (ESM) - главное нововведение в jQuery 4.0. Раньше библиотека использовала AMD-модули, что усложняло работу с современными сборщиками вроде Rollup или Vite. Теперь исходный код полностью на ESM, и jQuery импортируется как обычный модуль без хаков. Это упрощает разработку и делает библиотеку готовой к tree-shaking - автоматическому удалению неиспользуемого кода.

Пример: в проекте на Vite раньше приходилось настраивать RequireJS, а теперь достаточно строки import $ from 'jquery';. Размер после сжатия сократился, slim-версия весит всего 19.5 КБ. Но есть нюанс - изменения нарушают обратную совместимость в некоторых случаях, так что тестирование обязательно.

Вот что изменилось в модулях:

Полный ESM: код мигрирован с AMD на ES-модули, совместимо с нативными импортами браузера.
Интеграция с bundlers: webpack, Vite, Rollup теперь работают из коробки без плагинов.
Tree-shaking: неиспользуемые методы автоматически исключаются при сборке.
Удалены AMD-зависимости: больше не нужен RequireJS для импорта.

Сравнение модулей	jQuery 3.x	jQuery 4.0
Формат	AMD	ESM
Bundlers	С плагинами	Нативно
Размер slim (gz)	~23 КБ	19.5 КБ
Tree-shaking	Нет	Да

Важно: для IE11 используйте полную сборку, так как ESM там не поддерживается нативно.

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

jQuery 4.0 стала легче за счёт удаления устаревших API и полагания на нативные возможности браузеров. Убраны методы вроде jQuery.isArray, jQuery.trim, jQuery.parseJSON - теперь используйте нативные Array.isArray, String.prototype.trim, JSON.parse. Это очищает код и уменьшает бандл на 3 КБ в gzip.

Slim-сборка теперь без AJAX, анимаций, Deferreds и Callbacks - вместо них рекомендуют нативные Promises. Пример: вместо $.Deferred() пишем new Promise(). Порядок событий фокуса (focus/blur) приведён к W3C-стандарту: blur, focusout, focus, focusin. Раньше jQuery переопределял это для IE, но теперь следует спецификации.

Ключевые оптимизации:

Удалены deprecated API: isArray, trim, parseJSON и внутренние методы Array (push, sort, splice).
Slim без Deferreds: полагайтесь на Promises, размер упал до 19.5 КБ.
Нативный порядок событий: соответствует W3C, без IE-хаков.
Меньше legacy-кода: база упрощена для современных браузеров.

До и после оптимизации	jQuery 3.x	jQuery 4.0
Полная (gz)	30.5 КБ	27.5 КБ
Slim (gz)	23 КБ	19.5 КБ
Deprecated API	Много	Удалены
Promises	Deferreds	Нативные

Производительность выросла за счёт меньшего размера и отсутствия поллифиллов.

Поддержка браузеров и безопасность

jQuery 4.0 отказалась от IE10 и старше, старых Edge, устаревших iOS/Firefox. IE11 пока поддерживается, но уйдёт в jQuery 5. Это позволяет убрать тонну legacy-кода, делая библиотеку быстрее и проще. Фокус на Chromium-based браузерах и современных Safari/FF.

Trusted Types - новинка для защиты от XSS. Теперь в методы вроде .html() можно передавать объекты TrustedHTML, что совместимо с CSP. Пример: $(trustedHTMLdiv>Hi`). Это предотвращает инъекции через innerHTML. Безопасность на уровне современных фреймворков.

Изменения в поддержке:

Дропнуты: IE10-, Legacy Edge, старые мобильные.
Остаётся: IE11 (временно), все современные браузеры.
Trusted Types: защита от DOM XSS в .html(), .append().
CSP-совместимость: не нарушает политики безопасности.

Что даёт миграция на 4.0

Большинство кода сработает без изменений, но deprecated-фичи сломаются. Используйте миграционный плагин для проверки. jQuery остаётся актуальной для legacy-проектов, CMS и enterprise - на 70% сайтов она всё ещё в деле.

Релиз подводит черту под эпохой поллифиллов. Дальше - фокус на минимализме: ESM, Promises, Trusted Types. Стоит протестировать slim в проектах без AJAX, чтобы сбросить вес.