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

分析的方向分爲兩個維度：

一、代碼的乾淨程度和編譯的正確度。

二、編譯後代碼所佔空間的大小。

Typescript完勝。（固然對於babel-loader不公平，由於ts-loader畢竟解析了一個自創的Typescript的語法），因此使用Typescript編寫代碼在使用強語言類型檢測的同時，並不會產生代碼層面的反作用。