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

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

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

Jason Miller

Houssein Djirdeh

90% を超えるブラウザは最新の JavaScript を実行できますが、従来の JavaScript の普及がパフォーマンスの問題の原因となっている今すぐウェブで公開されています。

従来の JavaScript

従来の JavaScript は、上記の言語の使用を明示的に回避するコードです。説明します。ほとんどのデベロッパーは最新の構文でソースコードを記述しますが、すべてを以前の構文にコンパイルし、ブラウザのサポートを強化します。コンパイルブラウザのサポートは強化されますが、考えています多くの場合、サポートは約 95% から 98% 削減できます。

通常、従来の JavaScript は、従来の JavaScript よりも最新のコードを利用できます。ツールの欠陥と構成ミスがしばしば発生するこのギャップがさらに広がります
インストールされているライブラリが一般的な本番環境の 90% を占める使用できます。ライブラリコードでは、以前の JavaScript がさらに大きく回避できる可能性のあるポリフィルとヘルパーの重複によるオーバーヘッド開発できます

npm 上の最新の JavaScript

最近、Node.js では "exports" フィールドを標準化して、パッケージのエントリポイント:

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

"exports" フィールドで参照されるモジュールは、少なくとも 12.8 は ES2019 をサポートしています。つまり、Terraform で参照されるモジュールは、 "exports" フィールドは、最新の JavaScript で記述できます。パッケージコンシューマは、 "exports" フィールドを含むモジュールに最新のコードが含まれていると想定し、次の場合はトランスパイルされるできます。

以前のフォールバックと ESM バンドラ最適化による最新モデル

"module" フィールドは、フォールバックの CommonJS エントリポイントの定義に加えて、同様の以前のフォールバックバンドルを指すために使用されますが、 JavaScript モジュールの構文（import と export）。

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

webpack や Rollup などの多くのバンドラが、このフィールドを活用してこのモジュールの機能をツリーシェイキング。これはまだ従来のバンドルであり、Google Cloud で提供される import/export 構文が使用されるため、この方法を使用して最新のコードをバンドル用に最適化されたままの従来のフォールバックです

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

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

最新の JavaScript に移行する npm パッケージの数が増えるにつれ、処理できるようにビルドツールを設定することが重要です。また、利用している npm パッケージの一部は、すでに最新のバージョンを使っている可能性が高い提供します。最新のコードを使用するためのさまざまなオプション npm から入手することもできますが、依存関係を同じ構文にトランスパイルすることで、使用します。

Webpack

Webpack 5 以降では、webpack が使用する構文を設定できるようになりました。コードの生成時に発生します。これは、「接着剤」にのみ影響し、コードをコンパイルします。ブラウザのサポートターゲットを指定するには、 browserslist 構成プロジェクトに追加するか、webpack の構成で直接行います。

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

また、最適化されたバンドルを生成するように Webpack を構成することも、最新の ES モジュールをターゲットにする場合は不要なラッパー関数を省略できます。また、 <script type="module">。

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

さまざまな Webpack プラグインを使用して、従来のブラウザにも対応しながら、最新の JavaScript をコンパイルして配布できます。ダウンロードします

プラグインの最適化

Optimize Plugin: ウェブパック最終的にバンドルされたコードを最新の JavaScript から以前の JavaScript に変換するプラグイン個々のソースファイルではなくこれは自己完結型の構成でありすべてが最新の JavaScript であり、複数の出力や構文に対応する特殊分岐が利用されます。

オプティマイズプラグインは、個々のモジュールではなくバンドルで動作するため、アプリケーションのコードと依存関係を平等に処理します。これにより、最新の JavaScript 依存関係を使用しても安全です。なぜなら、バンドルされ、正しい構文にトランスパイルされます。また、P-MAX よりも 2 つのコンパイルステップを必要とする従来のソリューションと、引き続き生成最新のブラウザと従来のブラウザで別々にバンドルする必要があります。この 2 つのバンドルセットは、使用して読み込まれるように設計されている module/nomodule パターン:

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

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

Optimize Plugin はカスタム Webpack よりも高速かつ効率的です構成で使用します。これは、また、Babel の実行を処理し、 Terser を使用して、バンドルごとに最適な設定を説明します。最後に、生成された従来のバンドルは専用のスクリプトに抽出されるため、新しいブラウザで重複して読み込まれたり、不必要に読み込まれたりする可能性があります。

</ph> <ph type="x-smartling-placeholder">

比較: ソースモジュールの 2 回分のトランスパイルと、生成されたバンドルのトランスパイル

BabelEsmPlugin

BabelEsmPlugin: Webpack Google Cloud SDK などの @babel/preset-env 既存のバンドルの最新バージョンを生成し、トランスパイルされたコードを最新のブラウザで利用できます。最も人気のある既製のソリューションで 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 はさまざまな webpack の構成をサポートしています。これは、主に 2 つの別々のアプリケーションのビルドを実行します。2 回コンパイルすると大規模なアプリケーションの場合は時間が少し長くなりますが、 BabelEsmPlugin: 既存の webpack 構成にシームレスに統合非常に便利なオプションの一つです

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

前の 2 つのプラグインのいずれかなしで babel-loader を使用している場合: 最新の JavaScript npm を使用するには、重要な手順があります。説明します。2 つの異なる babel-loader 構成を定義すると、 node_modules にある最新の言語機能を、 Babel プラグインとプリセットを使用します。残念ながら、モジュール/nomodule 設定用の最新のバンドルと以前のバンドルを生成しますが、最新の JavaScript を含む npm パッケージをインストールして使用できるパフォーマンスを向上できます

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

// 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.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'],
          },
        },
      },
    ],
  },
};

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

傘下参入

Rollup には、統合の一部として複数のバンドルのセットを生成するサポートが組み込まれています。最新のコードを生成できます。その結果、公式プラグインを使用して最新のバンドルと以前のバンドルを生成するように構成できるすでにご存じかもしれません

@rollup/plugin-babel

傘下参入を使用すると getBabelOutputPlugin() メソッド（ロールアップの公式 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 を公開、配布、インストールして、アプリケーションの高速化を実現