ポリフィルとは？ブラウザの機能ギャップを埋める

ポリフィルは、ブラウザに欠けている機能を実装する JavaScript で、その機能を使うコードが古いブラウザでも動くようにします。

すべてのブラウザがすべての API をサポートするわけではありません。ポリフィルは、欠けている機能の動作する実装を提供することでギャップを埋め、コードが古いブラウザで壊れることなくモダンな API を使えるようにします。どのポリフィルを出荷するかは、どのブラウザをターゲットにするかにより、その判断は build が読む設定から流れます。

ポリフィル対トランスパイル

トランスパイルは新しい構文を古い構文に書き換えます。ポリフィルは、メソッドやグローバルのような、どんな構文変更でも提供できない欠けたランタイム機能を追加します。モダンなアプリは通常、両方を必要とします。構文をトランスパイルし、API をポリフィルします。

ポリフィルがどう選ばれるか

ツールは、ブラウザサポートリストに基づいて、ターゲットブラウザが実際に必要とするポリフィルだけを注入できます。可能なあらゆるポリフィルを引き込むと bundle が肥大化するため、ターゲティングがコストを妥当に保つものです。

ポリフィルのコスト

すべてのユーザーがダウンロードして実行する余分な JavaScript。
非常に古いブラウザ向けのポリフィルは、わずかな利得のために高くつくことがある。
一部の機能は完全にまたは効率的にポリフィルできない。

differential serving

一部のセットアップは、対応可能なブラウザにはモダンな bundle を、古いものにはポリフィル済みの bundle を配信するので、ほとんどのユーザーはオーバーヘッドを避けられます。これは、多数派向けの小さなペイロードと引き換えに、build と deploy の複雑さを追加します。

CI/CD でのポリフィル

build はブラウザターゲット設定に基づいてポリフィルを注入するため、その config を変えるとすべての build が出力するものが変わります。ターゲットリストとブラウザデータのバージョンをリポジトリに固定すると、CI build が再現可能になり、同じ commit の2回の実行が同一のポリフィルを出荷します。

重要なポイント

ポリフィルは欠けているブラウザ機能を実装します。トランスパイルは構文を書き換えるだけです。
ポリフィルをサポート対象ブラウザに絞ると、bundle が肥大化するのを防げます。
ブラウザターゲットを固定すると、CI build が再現可能になります。