Houssein Djirdeh氏とJason Miller氏は先日のChrome Developer Summit 2020で、最新のJavaScriptによるWebアプリケーションのサイズ削減とパフォーマンス向上の可能性について講演した。Webサイトestimator.devではGoogleによる改善可能性の推測値と、それを実現する上で有効なプラグインの推奨が提供されている。
Djirdeh氏の定義する最新のJavaScriptとは、すべての最新のブラウザ — ここでは4つの主要ブラウザ、すなわちChrome、Firefox、Edge、Safariと理解される — がサポートする構文で記述されたJavaScriptコードである。これらのブラウザに、基本的なレンダリングエンジンを共有するマイナなブラウザ(Operaなど)と合わせると、世界のWebトラフィックの95パーセントをカバーする。
最新のブラウザは、クラスやブロックスコープ、アロー関数、デストラクション、restとスプレッド引数、オブジェクトショートハンド、async/await、ジェネレータといった、ここ数年間に登場した一般的なJavaScript言語の機能をほとんどサポートしている。これらの構文機能(JavaScript標準化活動におけるES2015およびES2017バッチの一部)は、他のブラウザ(Internet Explorerなど)をサポートするために、ECMAScript 2009(一般にはES5と呼ばれる)にコンパイルダウンされることが少なくない。これが発生すると、元々コンパクトであったコードが拡張され、場合によっては数桁大きくなる場合があるため、ダウンロードサイズが大きく、実行速度は遅くなる。const foo = async () => 42という21バイトの1行コードを例に、Miller氏は次の点を強調する。
asyncアロー関数をサポートしていない他の5パーセントのブラウザで実行可能にするには、コードを変換する必要があります。[…]
現行のツールの大部分は、この21バイトのソースコードを参照して、例えば583バイトのソースコードに変換します。
生成されたコードに必要なランタイムライブラリがこれに加わるので、さらに6,500～7,000バイト程度大きくなります。
変換後のコードのロード時間がオリジナルよりも長いのは当然です — サイズが大きいのですから。さらにこの肥大したコンパイルコードは、ダウンロード後の実行速度も非常に遅いのです。[…] 元々のasync関数が62インストラクションにコンパイルされるのに対して、変換後のアウトプットのコンパイル結果は1,100以上にもなります。
[…]
これによって実現するメリットはただひとつ、Internet Explorer 11上で — しかも、実行に必要な11キロバイトのpolyfillを加えた上で — 実行可能になることだけです。
Djirdeh氏はさらに、全Webサイトの半分が(広告や分析など)サードパーティのスクリプトをロードしており、その90パーセントは元のWebサイトのものより負荷が高いという統計を紹介している。npmパッケージレジストリで公開されているフロントエンドモジュールの上位1,000件の中で、ES5より新しい構文を含んでいるには25パーセントにも満たない。これはつまり、サードパーティのスクリプトは、冗長ではあるがサポート範囲の広いES5構文で記述されているものが多い、ということだ。これについてDjirdeh氏は、次のように説明する。
その理由の大きな部分は、それらのパッケージが依存関係をトランスパイルしてブラウザを確実にサポートする手段として、アプリケーションバンドラに頼ることができない、という点にあります。依存関係をトランスパイルするビルドツールは、おそらくは半分に過ぎないでしょう。
前出のGoogleの調査結果を踏まえて、Djitdeh氏は、トランスパイル時のターゲットとする上で理想的なJavaScript言語はES2017である、という主張をする。ES2020とES2021の機能の多くはブラウザのサポートがまだ不十分であるのに対して、ES2017はブラウザのサポートと言語機能の間の妥協点として望ましい、というのがその理由だ。添付した例を参照して、Djirdeh氏は次のように言う。
トランスパイルのターゲットとして適切なのはES2017です。最新のES2020構文の機能をES2017にトランスパイルする作業は、一般的にコスト効率が極めて優れています。
awaitループに対するこの例のようなトランスパイル結果は、私たちが望んでいたもののひとつです。この例では、オーバーロードは4バイトに過ぎません。
Webサイトestimator.devでは、最新のJavaScript使用に関連する効率化について、Googleの推定値が提供されている。同サイト自体をその処理に適用してみると、"このサイトは最新のJavaScriptを使うことで9パーセント高速になるでしょう"、という推測値が生成される。infoq.comニュースサイトに適用した結果、改善余地は6パーセントと示された。同サイトはこの省力化の推定値ンいついて、バンドルを最新コードに"逆トランスパイル"することで算出したものだ、と説明しているが、計算結果をダブルチェック可能にするような情報は提供されていない。
アプリケーションの2つのバージョンを提供することで、古いブラウザを引き続きサポートする方法もある。Googleの関連するブログ記事を参照するのもよいだろう。バンドリングの最適化やレガシへのフォールバック生成に関する詳細な技術情報が数多く提供されている。講演の全内容はオンライン公開されており、他のサンプルも紹介されている。
Chrome Developer Summitは年次開催されるカンファレンスで、最新のツール、Google Chromeブラウザに近々提供されるアップデート、その他Web全般について学ぶことができる。2020年版はオンラインで開催され、全公演の内容がSummitのYouTubeチャネルで公開されている。