Как добавлять полифиллы для JS

, Александр Мышов

Недавно Иван Акулов в своём блоге рассказал про все современные подходы добавления полифиллов для JS — "How to load polyfills only when needed".

На данный момент есть три актуальных подхода:

  1. С помощью Polyfill.io. Это сторонний сервис, который определяет браузер по UA string и возвращает скрипт только с теми полифиллами, которые, действительно, нужны. Есть недостаток — добавляет 50-300мс к TTI.
  2. Используя паттерн "module/nomodule". Если скрипт содержит type="module", он не будет выполняться в тех браузерах, которые не поддерживают ECMAScript Modules, то есть в старых браузерах. Если скрипт содержит аттрибут nomodule, то этот скрипт не будет выполняться в новых браузерах. Благодаря этим атрибутам новые и старые браузеры могут загружать необходимый набор полифиллов. Этот паттерн нельзя использовать, если требуется определение фич выше ES2015.
  3. Используя опцию useBuiltins в @babel/preset-env, babel может подключать полифиллы только для тех браузеров, которые были указаны в конфиге. useBuiltins не самое лучшее решение, если необходима поддержка старых браузеров.

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

Статья хорошая, очень рекомендую почитать, если занимаетесь оптимизациями.

https://3perf.com/blog/polyfills/

← На главную