このページは Cloud Translation API によって翻訳されました。

最新の JavaScript を公開、配布、インストールして、アプリケーションの高速化を実現

最新の JavaScript の依存関係と出力を有効にして、パフォーマンスを向上させます。

Jason Miller

Houssein Djirdeh

ブラウザの 90% 以上は最新の JavaScript を実行できますが、従来の JavaScript が広く使用されていることが、ウェブ上のパフォーマンスの問題の大きな原因となっています。

従来の JavaScript

従来の JavaScript は、上記の言語機能の使用を明示的に回避するコードです。ほとんどのデベロッパーは最新の構文を使用してソースコードを作成しますが、ブラウザのサポートを強化するため、すべてを以前の構文にコンパイルします。以前の構文にコンパイルするとブラウザのサポートは増えますが、その効果は想定よりも小さいことがよくあります。多くの場合、サポートは 95% から 98% に向上しますが、大幅な費用が発生します。

通常、レガシー JavaScript は同等の最新コードよりも約 20% 大きく、遅くなります。ツールの欠陥や構成ミスにより、このギャップはさらに広がることがよくあります。
インストールされたライブラリは、一般的な本番環境の JavaScript コードの 90% を占めています。ライブラリコードでは、従来の JavaScript のオーバーヘッドがさらに大きくなります。これは、最新のコードを公開することで回避できるポリフィルとヘルパーの重複が原因です。

npm 上の最新の JavaScript

最近、Node.js では "exports" フィールドが標準化され、パッケージのエントリポイントを定義できるようになりました。

{
  "exports": "./index.js"
}

"exports" フィールドで参照されるモジュールは、ES2019 をサポートする Node バージョン 12.8 以降を前提としています。つまり、"exports" フィールドを使用して参照されるモジュールは、最新の JavaScript で記述できます。パッケージコンシューマは、"exports" フィールドを含むモジュールに最新のコードが含まれていると想定し、必要に応じてトランスパイルする必要があります。

モダンのみ

最新のコードでパッケージを公開し、コンシューマが依存関係として使用するときにトランスパイルの処理を任せる場合は、"exports" フィールドのみを使用します。

{
  "name": "foo",
  "exports": "./modern.js"
}

注意: この方法はおすすめしません。理想的には、すべてのデベロッパーが、すべての依存関係（node_modules）を必要な構文にトランスパイルするようにビルドシステムを構成しているはずです。ただし、現時点ではこれは当てはまりません。最新の構文のみを使用してパッケージを公開すると、従来のブラウザ経由でアクセスするアプリケーションでそのパッケージを使用できなくなります。

モダン（従来版のフォールバックあり）

最新のコードを使用してパッケージを公開し、以前のブラウザ向けに ES5 + CommonJS のフォールバックも含めるには、"main" とともに "exports" フィールドを使用します。

{
  "name": "foo",
  "exports": "./modern.js",
  "main": "./legacy.cjs"
}

レガシーフォールバックと ESM バンドルツールの最適化によるモダナイゼーション

フォールバックの CommonJS エントリポイントを定義するだけでなく、"module" フィールドを使用して同様の以前のフォールバックバンドルを指定することもできますが、1 つは JavaScript モジュール構文（import と export）を使用します。

{
  "name": "foo",
  "exports": "./modern.js",
  "main": "./legacy.cjs",
  "module": "./module.js"
}

webpack や Rollup などの多くのバンドルは、このフィールドを使用してモジュール機能を活用し、ツリーシェイキングを有効にします。これは、import/export 構文以外に最新のコードが含まれていないレガシーバンドルです。この方法では、バンドルに最適化されたレガシーフォールバックとともに最新のコードを配信します。

アプリケーションでの最新の JavaScript

サードパーティの依存関係は、ウェブアプリケーションの一般的な本番環境 JavaScript コードの大部分を占めています。npm の依存関係は従来、従来の ES5 構文として公開されていましたが、これはもはや安全な前提ではなく、依存関係の更新によってアプリケーションのブラウザサポートが中断されるリスクがあります。

最新の JavaScript に移行する npm パッケージの数が増えるなか、ビルドツールがそれらのパッケージを処理するように設定されていることを確認することが重要です。依存している npm パッケージの一部は、すでに最新の言語機能を使用している可能性があります。古いブラウザでアプリケーションを破壊することなく npm の最新のコードを使用するには、いくつかの方法があります。一般的な考え方は、ビルドシステムで依存関係をソースコードと同じ構文ターゲットにトランスパイルすることです。

webpack

webpack 5 では、バンドルとモジュールのコード生成時に webpack が使用する構文を構成できるようになりました。これにより、コードや依存関係がトランスパイルされるわけではありません。webpack によって生成された「グルー」コードにのみ影響します。ブラウザサポートターゲットを指定するには、プロジェクトに browserslist 構成を追加するか、webpack 構成で直接指定します。

module.exports = {
  target: ['web', 'es2017'],
};

最新の ES モジュール環境をターゲットとするときに、不要なラッパー関数を省略した最適化されたバンドルを生成するように webpack を構成することもできます。また、<script type="module"> を使用してコード分割バンドルを読み込むように webpack を構成します。

module.exports = {
  target: ['web', 'es2017'],
  output: {
    module: true,
  },
  experiments: {
    outputModule: true,
  },
};

Optimize Plugin や BabelEsmPlugin など、従来のブラウザをサポートしながら最新の JavaScript をコンパイルして出荷できる webpack プラグインがいくつかあります。

Optimize Plugin

Optimize Plugin は、個々のソースファイルではなく、最終的なバンドルコードを最新の JavaScript からレガシー JavaScript に変換する webpack プラグインです。これは自己完結型の設定で、webpack 構成ですべてが最新の JavaScript であると想定し、複数の出力や構文に特別な分岐を設定する必要はありません。

オプティマイズプラグインは、個々のモジュールではなくバンドルで動作するため、アプリケーションのコードと依存関係を同等に処理します。これにより、コードがバンドルされて正しい構文にトランスパイルされるため、npm から最新の JavaScript 依存関係を安全に使用できます。また、2 つのコンパイルステップを含む従来のソリューションよりも高速に処理できます。その場合でも、モダンブラウザとレガシーブラウザ用に個別のバンドルが生成されます。2 つのバンドルは、module/nomodule パターンを使用して読み込まれるように設計されています。

// webpack.config.js
const OptimizePlugin = require('optimize-plugin');

module.exports = {
  // ...
  plugins: [new OptimizePlugin()],
};

Optimize Plugin は、通常はモダンコードとレガシーコードを個別にバンドルするカスタム webpack 構成よりも高速で効率的です。また、Babel の実行も処理し、最新の出力とレガシー出力に別々の最適な設定を使用して Terser を使用してバンドルを圧縮します。最後に、生成されたレガシーバンドルに必要なポリフィルが専用のスクリプトに抽出されるため、新しいブラウザで重複したり、不必要に読み込まれたりすることはありません。

比較: ソースモジュールを 2 回変換する場合と、生成されたバンドルを変換する場合。

BabelEsmPlugin

BabelEsmPlugin は、@babel/preset-env と連携して既存のバンドルの最新バージョンを生成し、最新のブラウザにトランスパイルされたコードをより少なく出荷する webpack プラグインです。これは、module/nomodule 用の最も一般的な市販ソリューションであり、Next.js と Preact CLI で使用されています。

// webpack.config.js
const BabelEsmPlugin = require('babel-esm-plugin');

module.exports = {
  //...
  module: {
    rules: [
      // your existing babel-loader configuration:
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [new BabelEsmPlugin()],
};

BabelEsmPlugin は、アプリケーションの 2 つのビルドをほぼ別々に実行するため、さまざまな webpack 構成をサポートしています。大規模なアプリケーションでは、2 回コンパイルすると少し時間がかかりますが、この手法では BabelEsmPlugin を既存の webpack 構成にシームレスに統合できるため、最も便利なオプションの 1 つになります。

node_modules をトランスパイルするように babel-loader を構成する

上記の 2 つのプラグインのいずれかを使用せずに babel-loader を使用している場合は、最新の JavaScript npm モジュールを使用するには重要な手順が必要です。2 つの個別の babel-loader 構成を定義すると、node_modules にある最新の言語機能を ES2017 に自動的にコンパイルしながら、プロジェクトの構成で定義されている Babel プラグインとプリセットを使用して独自のファーストパーティコードをトランスパイルできます。これにより、モジュールあり / モジュールなしの設定用の最新のバンドルと従来のバンドルは生成されませんが、古いブラウザを損なうことなく、最新の JavaScript を含む npm パッケージをインストールして使用できるようになります。

webpack-plugin-modern-npm は、この手法を使用して、package.json に "exports" フィールドを持つ npm 依存関係をコンパイルします。これらの依存関係には、最新の構文が含まれている可能性があります。

// webpack.config.js
const ModernNpmPlugin = require('webpack-plugin-modern-npm');

module.exports = {
  plugins: [
    // auto-transpile modern stuff found in node_modules
    new ModernNpmPlugin(),
  ],
};

また、モジュールの解決時にモジュールの package.json で "exports" フィールドを確認することで、この手法を webpack 構成に手動で実装することもできます。簡潔にするためキャッシュを省略すると、カスタム実装は次のようになります。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // Transpile for your own first-party code:
      {
        test: /\.js$/i,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      // Transpile modern dependencies:
      {
        test: /\.js$/i,
        include(file) {
          let dir = file.match(/^.*[/\\]node_modules[/\\](@.*?[/\\])?.*?[/\\]/);
          try {
            return dir && !!require(dir[0] + 'package.json').exports;
          } catch (e) {}
        },
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: false,
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

この方法を使用する場合は、ミニファイアで最新の構文がサポートされていることを確認する必要があります。Terser と uglify-es のどちらにも、圧縮時とフォーマット時に ES2017 構文を保持し、場合によっては生成するために、{ecma: 2017} を指定するオプションがあります。

ロールアップ

ロールアップには、単一のビルドの一部として複数のバンドルセットを生成するためのサポートが組み込まれており、デフォルトで最新のコードが生成されます。その結果、すでに使用している可能性が高い公式プラグインで最新のバンドルと以前のバンドルを生成するように Rollup を構成できます。

@rollup/plugin-babel

Rollup を使用する場合は、getBabelOutputPlugin() メソッド（Rollup の公式 Babel プラグインが提供するメソッド）により、個々のソースモジュールではなく、生成されたバンドル内のコードが変換されます。Rollup には、1 つのビルドの一部として複数のバンドルセットを生成するためのサポートが組み込まれています。各バンドルセットには独自のプラグインがあります。これを使用して、異なる Babel 出力プラグイン構成にそれぞれを渡すことで、最新とレガシー用に異なるバンドルを生成できます。

// rollup.config.js
import {getBabelOutputPlugin} from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: [
    // modern bundles:
    {
      format: 'es',
      plugins: [
        getBabelOutputPlugin({
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {esmodules: true},
                bugfixes: true,
                loose: true,
              },
            ],
          ],
        }),
      ],
    },
    // legacy (ES5) bundles:
    {
      format: 'amd',
      entryFileNames: '[name].legacy.js',
      chunkFileNames: '[name]-[hash].legacy.js',
      plugins: [
        getBabelOutputPlugin({
          presets: ['@babel/preset-env'],
        }),
      ],
    },
  ],
};

その他のビルドツール

Rollup と webpack は高度に構成可能です。通常、各プロジェクトは、依存関係で最新の JavaScript 構文を有効にするために構成を更新する必要があります。Parcel、Snowpack、Vite、WMR など、構成よりも規則とデフォルトを重視する上位レベルのビルドツールもあります。これらのツールのほとんどは、npm の依存関係に最新の構文が含まれていることを想定しており、本番環境向けにビルドするときに適切な構文レベルにトランスパイルされます。

webpack と Rollup 専用のプラグインに加えて、以前のフォールバックを含む最新の JavaScript バンドルを、デビオレーションを使用して任意のプロジェクトに追加できます。Devolution は、ビルドシステムの出力を変換してレガシー JavaScript バリアントを生成するスタンドアロンツールです。これにより、バンドルと変換で最新の出力ターゲットを想定できます。

最新の JavaScript を公開、配布、インストールして、アプリケーションの高速化を実現