Typescript性能调研

TS编译过程

ts-loader或者是asome-typescript-loader对于ts/tsx文件在编译期间。
Typescript的语法对于编译后生成的文件是pure的,是没有副作用的,不会增加额外的垫片。举一个例子。
编译前:

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

var result = greeter({firstName: 'first', lastName: 'last'});

console.log(result);

编译后:

/***/ 98:
/***/ (function(module, exports) {

function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var result = greeter({ firstName: 'first', lastName: 'last' });
console.log(result);

/***/ })

从结果上看,非常的纯净!突然想起了一句广告语——“我们不生产代码,我们只是代码的搬运工”。
(有点黑,哈哈~)
Typescript在编译的时候做了一件非常有趣的事,如果类型检测通过,那么就把ts语法过滤掉,生成纯净的js。所以经过ts-loader编译后的代码完全不用担心编译后的js里面加了一坨又一坨垫片进去了。

“ts-loder” VS “babel-loder”

  • ts-loder

使用ts-loder编译前:

class Greeter {
    private greeting: string;
    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

ts-loder编译后:(整个文件88行代码,2.91kb。文件中其他的代码来自于webpack)

/***/ 98:
/***/ (function(module, exports) {

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
var greeter = new Greeter("world");

/***/ })    
  • babel-loader

使用babel-loader编译前:

class Greeter {

    constructor(message) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

使用babel-loader编译后:(整个文件102行代码,3.77kb。文件中其他的代码来自于webpack)

/***/ 95:
/***/ (function(module, exports, __webpack_require__) {

"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 Greeter = function () {
    function Greeter(message) {
        _classCallCheck(this, Greeter);

        this.greeting = message;
    }

    _createClass(Greeter, [{
        key: "greet",
        value: function greet() {
            return "Hello, " + this.greeting;
        }
    }]);

    return Greeter;
}();

var greeter = new Greeter("world");

/***/ })

总结

ts-loder解析ts/tsx文件时不会有额外的代码生成,非常干净。相比于babel-loader差距比较大。

  • 解析ES6->ES5: ts-loder明显优于babel-loader

分析的方向分为两个维度:

1、代码的干净程度和编译的正确度。

2、编译后代码所占空间的大小。

Typescript完胜。(当然对于babel-loader不公平,因为ts-loader毕竟解析了一个自创的Typescript的语法),所以使用Typescript编写代码在使用强语言类型检测的同时,并不会产生代码层面的副作用。

    原文作者:caozheng550
    原文地址: https://segmentfault.com/a/1190000008673052
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞