【Web Performance】@babel/plugin-transform-classes

LightHouseでページのパフォーマンスを計測すると、改善提案のところに"Avoid serving legacy JavaScript to modern browsers"とあり、@babel/plugin-transform-classesが挙げられていた

自分では導入していないライブラリだったので調べてみた

babeljs.io

これは@babel/preset-envプラグインに含まれているライブラリ

ドキュメントにあるように以下のことを行う

• BabelはSuperClass.apply(/* ... */)を使ってclassをトランスパイルするが、ネイティブクラスは呼び出されないのでこの場合はthrowする
• 一部の組み込み関数（Arrayなど）は、常に新しいオブジェクトを返すので、その代わりにBabel は新しいthisとして扱う

IN

class Test {
  constructor(name) {
    this.name = name;
  }

  logger() {
    console.log("Hello", this.name);
  }
}

OUT

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Test = (function() {
  function Test(name) {
    _classCallCheck(this, Test);

    this.name = name;
  }

  Test.prototype.logger = function logger() {
    console.log("Hello", this.name);
  };

  return Test;
})();

babelを使っている以上、自分では削除できないみたいなので静観することにした