O Que É um Polyfill? Preenchendo Lacunas de Recursos do Browser
Um polyfill é JavaScript que implementa um recurso que falta a um browser, para que o código que usa esse recurso ainda funcione em browsers mais antigos.
Nem todo browser suporta toda API. Um polyfill preenche a lacuna fornecendo uma implementação funcional do recurso ausente, para que seu código possa usar APIs modernas sem quebrar em browsers mais antigos. Quais polyfills você envia depende de quais browsers você tem como target, e essa decisão decorre da configuração que o build lê.
Polyfill vs transpile
A transpilação reescreve nova sintaxe em sintaxe mais antiga. Um polyfill adiciona um recurso ausente de runtime, como um método ou um global, que nenhuma mudança de sintaxe pode fornecer. Apps modernos geralmente precisam de ambos: transpilar a sintaxe, fazer polyfill das APIs.
Como os polyfills são escolhidos
As ferramentas podem injetar apenas os polyfills que seus browsers de target realmente precisam, com base em uma lista de suporte a navegadores. Puxar todos os polyfills possíveis incha o bundle, então o targeting é o que mantém o custo razoável.
O custo dos polyfills
- JavaScript extra que todo usuário baixa e executa.
- Fazer polyfill para browsers muito antigos pode ser caro para pouco ganho.
- Alguns recursos não podem ser totalmente ou eficientemente polyfillados.
Serving diferencial
Algumas configurações servem um bundle moderno para browsers capazes e um bundle com polyfill para os antigos, de modo que a maioria dos usuários evita a sobrecarga. Isso adiciona complexidade de build e deploy em troca de payloads menores para a maioria.
Polyfills no CI/CD
O build injeta polyfills com base na configuração do seu browser target, então mudar essa config muda o que cada build emite. Fixar a lista de targets e a versão dos dados de navegadores no repositório mantém os builds de CI reproduzíveis, para que duas execuções do mesmo commit enviem polyfills idênticos.
Principais conclusões
- Um polyfill implementa um recurso ausente do browser; a transpilação apenas reescreve a sintaxe.
- Direcionar os polyfills aos browsers suportados evita que o bundle inche.
- Fixar o browser target torna os builds de CI reproduzíveis.