（時には）現代のjavascriptを書かないことによる重いバベル変換を避けてください

Babelは、最新のJavaScript開発に不可欠であり、最先端の機能とブラウザの互換性の間のギャップを埋めます。ただし、バベルの変換は、強力ですが、予想外に大きく複雑な出力につながることがあります。この記事では、より伝統的なJavaScriptアプローチがより小さく、より効率的なコードを生み出し、ユーザーのブラウザの負担を最小限に抑えるシナリオを調査します。

BabelのオンラインREPLを使用してこれらのポイントを説明し、ES2015サポートを欠いているブラウザをターゲットにします。焦点は「Old vs. New」ではなく、最小限のビルドプロセスのオーバーヘッドで機能する機能を最適化することに焦点を当てています。

ループfor...of最適化

ループfor...of 、特に未知のタイプの反復性を返す関数を扱う場合、驚くほど大きなバベル出力を生成できます。アレイ上のループfor...ofシンプルなもの：

関数getList（）{
  return [1、2、3];
}

for（let value of getList（））{
  console.log（value）;
}

さまざまな反復可能なタイプを処理する必要があるため、バベル処理後に1.8kbに膨張する可能性があります。配列の場合、従来forループはフットプリントが大幅に小さく、 breakやcontinueなどのループ制御機能を保持します。

関数getList（）{
  return [1、2、3];
}

for（var i = 0; i <getlist i console.log><p>あるいは、Polyfiled <code>forEach</code>も良い解決策になる可能性があります。</p>
<h3 id="配列の広がり構文から膨張を減らす">配列の広がり構文から膨張を減らす</h3>
<p>スプレッドオペレーター（ <code>...</code> ）は簡潔な配列操作を提供しますが、バベルのハンドリングは、入力のタイプが不確かな場合に重要なオーバーヘッドを導入できます。この例を考えてみましょう。</p>
<pre class="brush:php;toolbar:false">関数getList（）{
  return [4、5、6];
}

console.log（[1、2、3、... getList（）]）;

バベルは1.3kbを超えるコードを生成する可能性があります。 Array.concat() 、よりコンパクトな代替品を提供します。

関数getList（）{
  return [4、5、6];
}

console.log（[1、2、3] .concat（getList（）））;

ノデリスト反復

NodeListをループするには、多くの場合、それをArrayに広げて、 forEach互換性のために広げます。ただし、これにより出力が肥大化する可能性があります。 Array.prototype.slice.call()を使用すると、より効率的なアプローチが提供されます。

 [] .slice.call（document.queryselectorall（'。my-class '））。foreach（function（node）{
  //何かをします
}）;

デフォルトのパラメーターと@babel/preset-envのルーズモード

デフォルトのパラメーターはコードの読みやすさを強化しますが、バベルの変換は冗長になる可能性があります。 @babel/preset-envのlooseモードは、出力サイズを削減できますが、潜在的なセマンティックの妥協点を導入します。 undefinedの簡単なチェックは、自己文書化が少なく、代替手段ではありますが、より直接的なものを提供します。

 function getName（name）{
  name = name || "私の友人";
  `hello、$ {name}！`;
}

async/await and Promise api

Async/awaitは非同期操作を簡素化しますが、Babelのデフォルトの変換（ジェネレーターとregenerator-runtimeを使用）は、かなりのコードサイズをもたらす可能性があります。 babel-plugin-transform-async-to-promisesのようなプラグインはこれを軽減できますが、Promise APIを直接使用すると、より予測可能でしばしば小さい出力が得られます。

 function fetchsomething（url）{
  return fetch（url）.then（response => respons.json（））;
}

クラスの構文と擬似学問的アプローチ

ES2015クラスは、プロトタイプ継承用の構文糖を提供します。ただし、バベルの輸送は広範囲に及ぶ可能性があります。より単純な継承シナリオでは、疑似順守的なアプローチで十分かもしれません。

 function robot（name）{
  this.name = name;
  this.speak = function（）{
    console.log（ `ime $ {this.name}！`）;
  };
}

戦略的な考慮事項

最新のアプローチと従来のアプローチの選択は、ターゲットブラウザーのサポートやプロセスの最適化の構築などの要因に依存します。ディファレンシャルサービングなどの戦略は、ES2015サポートのみを必要とするユーザーに最適化されたコードを提供するのに役立ちます。

重要なポイントは、バベルの出力に留意することです。依存したコードを時々検査することにより、開発者は情報に基づいた意思決定を行い、各シナリオで最も効率的なアプローチを選択し、アプリケーションのパフォーマンスとユーザーエクスペリエンスを改善できます。

以上が（時には）現代のjavascriptを書かないことによる重いバベル変換を避けてくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。