转译的 ES2017 和编译的 TypeScript 之间的性能差异？

Question

我问自己，转译后的 ES2017+ 和编译后的 TypeScript 是否在某一点上出现任何性能差异？

这个想法冒出来了，但考虑到生成的 JS，这是完全不同的（不过 TypeScript 的 JS 似乎更简单）。

ES2017 代码

class TestClass {
  constructor(valueA) {
    this.valueA = valueA;
  }

  getValueA() {
   return this.valueA; 
  }
}

变成

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

var TestClass = function () {
  function TestClass(valueA) {
    _classCallCheck(this, TestClass);

    this.valueA = valueA;
  }

  _createClass(TestClass, [{
    key: "getValueA",
    value: function getValueA() {
      return this.valueA;
    }
  }]);

  return TestClass;
}();

TypeScript 代码

class TestClass {
  valueA: any;
  constructor(valueA) {
    this.valueA = valueA;
  }

  getValueA() {
   return this.valueA; 
  }
}

变成

var TestClass = /** @class */ (function () {
    function TestClass(valueA) {
        this.valueA = valueA;
    }
    TestClass.prototype.getValueA = function () {
        return this.valueA;
    };
    return TestClass;
}());

Answer 1

当然，您引用的两个输出之间存在性能差异，尽管这些性能差异不太重要。 Babel 的输出使用了几个函数调用，检查各种东西等。TypeScript 的输出没有。

值得注意的是，原因 Babel 所做的就是尽最大努力确保其输出的代码的正确性。 ES2015 的 class 需要检查，例如要求通过 new 或 super 调用构造函数； TypeScript 的转译代码不这样做。

Babel 的某些转换具有“松散”模式，可让它们输出技术上不正确的代码，但会产生更快的代码，并且在大多数情况下，最终结果与正确代码的结果相同。例如，如果您在该代码上使用es2015-loose 而不是es2015，you get this（我已经做了一些自动换行）：

"use strict";

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

var TestClass = function () {
  function TestClass(valueA) {
    _classCallCheck(this, TestClass);

    this.valueA = valueA;
  }

  TestClass.prototype.getValueA = function getValueA() {
    return this.valueA;
  };

  return TestClass;
}();

...这更类似于 TypeScript 输出。