最新のブラウザに最新のコードを提供し、ページの読み込みを高速化する

Houssein Djirdeh

あらゆる主要なブラウザで適切に機能するウェブサイトを構築することは、 オープンウェブ エコシステムです。ただしこれには 記述するコードが、ターゲットとする各ブラウザでサポートされていること。もし 新しい JavaScript 言語機能を使用するには、これらの機能を の機能を後方互換性のある形式に変更する（まだサポートしていないブラウザ向け） できます。

Babel はコードをコンパイルするために最も広く使用されているツールです。 異なるブラウザや環境に対応した新しい構文をコードに組み込む （Node.js など）が理解できるということです。このガイドでは、Babel の使用を前提としているため、 設定手順に沿って、 まだアプリケーションに追加していない場合は、追加してください。webpack を選択 アプリでモジュール バンドラとして webpack を使用している場合は、Build Systems にあります。

Babel を使用してユーザーが必要とするものだけをトランスパイルするには、 必要があります。

  1. ターゲットとするブラウザを指定します。
  2. 適切なブラウザ ターゲットで @babel/preset-env を使用します。
  3. <script type="module"> を使用して、トランスパイルされたコードを必要としないブラウザへの送信を停止します。

ターゲットとするブラウザを指定する

アプリケーションのコードのトランスパイル方法を変更する前に、 アプリケーションにアクセスするブラウザを特定する必要があります。ブラウザを分析 ユーザーと今後に向けて 十分な情報に基づいた判断を下すことができます。

@babel/preset-env を使用する

通常、コードをトランスパイルすると、ファイルサイズが 変換されます。コンパイルの量を最小限に抑えることで、 バンドルのサイズを小さくして、ウェブページのパフォーマンスを向上させることができます。

特定の言語を選択的にコンパイルする特定のプラグインを含める代わりに、 Babel にはプラグインや OS を含むさまざまな プリセットのプリセットが用意されています 説明します。@babel/preset-env を使用する 使用する予定のブラウザに必要な変換とポリフィルのみを含める ターゲティングできます

Babel の presets 配列に @babel/preset-env を含めます 構成ファイル .babelrc:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
}

targets フィールドを使用して、含めるブラウザのバージョンを指定します browsers フィールドに適切なクエリを追加します。@babel/preset-env ブラウザリスト（ブラウザ間で共有されるオープンソースの構成）と統合 ブラウザターゲティング用のツール互換性のあるクエリの一覧は、 browserslist のドキュメントをご覧ください。 もう 1 つの方法は、.browserslistrc ファイルを使用して環境を一覧表示することです。 選択します

">0.25%" 値により、変換のみを含めるよう Babel に指示します 世界の 0.25% 以上を占めるブラウザをサポートする必要がありました。 できます。これにより、不要なトランスパイルされたリソースがバンドルに含まれなくなります。 使用頻度の低いブラウザ向けのコードです。

ほとんどの場合、以下を使用するよりもこの方法のほうが適しています。 構成:

  "targets": "last 2 versions"

"last 2 versions" 値により、次のトークンのコードがトランスパイルされます。 すべてのブラウザの直近 2 つのバージョン つまり、Internet Explorer などの廃止されたブラウザもサポートの対象となります。 バンドルのサイズが大きくなると、バンドルのサイズが不必要に大きくなることがあります。 使用するブラウザを指定します。

最終的には、目的のクエリにのみアクセスして、 ニーズに合ったブラウザをターゲットにできます

最新のバグの修正を可能にする

@babel/preset-env は、複数の JavaScript 構文機能をコレクションにグループ化し、有効または無効にします。 ブラウザに応じて自動的に作成されます。この方法はうまく機能しますが、 構文の機能が変換されるのは、対象のブラウザに機能が 1 つしかないバグがある場合です。 その結果、必要以上にコードが変換されることが多くなります。

元々は個別のプリセットとして開発されましたが、 @babel/preset-env のバグ修正オプション は、一部のブラウザで壊れてしまう最新の構文を最も近い構文に変換することで、この問題を解決します。 それらのブラウザで互換性が維持される同等の構文を使用できます。その結果、以前のモデルとほぼ同じ 構文のわずかな調整により、すべてのターゲット ブラウザでの互換性が保証されています。使用するには @babel/preset-env 7.10 以降がインストールされていることを確認し、 bugfixes プロパティを true に追加する:

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
}

Babel 8 では、bugfixes オプションがデフォルトで有効になります。

<script type="module">

JavaScript モジュール（ES モジュール）は、 モジュールを使用すると、 他のモジュールからインポートおよびエクスポートできるスクリプトを作成できますが、 また、@babel/preset-env と併用すると、サポートされているブラウザのみをターゲットにできます。 できます。

ブラウザの特定のバージョンやマーケット シェアをクエリするのではなく、 .babelrc ファイルの targets フィールド内で "esmodules" : true を指定する。

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
}

Babel でコンパイルされた新しい ECMAScript 機能の多くがすでにサポートされています 使用できます。これにより、 トランスパイルされたコードのみが使用されるようにするプロセスを簡素化できます。 ブラウザにのみ対応しています。

モジュールをサポートするブラウザでは、nomodule 属性を持つスクリプトは無視されます。 逆に、モジュールをサポートしていないブラウザでは、 type="module"。つまり、モジュールとコンパイル済みフォールバックを含めることができます。

2 つのバージョンのスクリプトが次のように含まれているのが理想的です。

  <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script>

モジュールをサポートするブラウザは、main.mjs を取得して実行し、compiled.js を無視します。 モジュールをサポートしていないブラウザでは、モジュールがサポートされなくなります。

webpack を使用する場合は、2 つの構成で異なるターゲットを設定できます。 アプリケーションのバージョンごとに異なります。

  • モジュールをサポートするブラウザ専用のバージョン。
  • 従来のブラウザで動作するコンパイル済みスクリプトを含むバージョン。トランスパイルでは、より幅広いブラウザをサポートする必要があるため、ファイルサイズは大きくなります。
で確認できます。

レビューを投稿してくれた Connor Clark と Jason Miller に感謝します。