Transitioning to modern JavaScript

オイルパイプ報告整理
モダンJavaScriptとは?ES2015? ES2017? ES2020?
バージョンではなく、モダンブラウザで動作するコードを指します.
ユーザーの95%がモダンブラウザを使用
IEなどの従来のサポートのために、モダンブラウザの経験を下げるのはかなり悪い戦略です.
さらに、追加コードの伝送により、二酸化炭素の排出量も向上します.
年間3千7百万本の木を折り畳むことができます
JavaScriptの仕組みを説明する
バーベル、tsなどのコンパイルコード転送-エンジンで実行される仮想マシン
asyncサンプルコードのコンパイル
古い構文を使用したコンパイル:速度が6倍遅くなり、コードの長さが数十倍になります.
ACBによると,伝送された89%のコードはサードパーティコード(ライブラリなど)である.
ただし、npmに代表されるライブラリには古いバージョンがたくさんあります
さらにnpmのデフォルト値は継承です
理由は?依存性を変換するツールの割合は半分です.つまり、残りのファイルは変換されません
ブラウザのサポートに対応
解決策はある
npmのソリューション

// package.json
{
  "name": "amaze-js",
  "exports": "./modern.js",
  "main": "./legacy.js"
}

ソリューションの導入
ソリューション1:95%のサポートで、十分であればES 2017へのコンパイルと導入のみ
ソリューション2:バージョンによる2回のコンパイル

<script type="module" src="app.modern.js"></script>
<script nomodule src="app.legacy.js"></script>

ビーム、バーベル、tsを使用してモダンと旧式に分けます.
ソリューション3:モダンJavaScriptにコンパイルし、
ES 2020->ES 2017->ES 5コンパイル後はES 5のみに配備
ただし、現代のブラウザの95%では、パフォーマンスの問題が発生する可能性があります.
IE 11を支払う必要のない税金と見なす
参照ドキュメント:
https://web.dev/publish-modern-javascript
パフォーマンス比較サイト:
https://estimator.dev/