Typescript性能调研

最新推荐文章于 2025-06-02 09:07:08 发布

转载最新推荐文章于 2025-06-02 09:07:08 发布 · 670 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008673052

文章标签：

#javascript #python #webpack #ViewUI

本文对比了使用ts-loader和babel-loader编译TypeScript代码的效果。通过实例展示，ts-loader在转换TS到JS的过程中保持了代码的纯净度，相较于babel-loader生成更少的额外代码，适合追求高效简洁代码的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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编写代码在使用强语言类型检测的同时，并不会产生代码层面的副作用。