记一次三种ts编译工具的测试

在一次webpack优化中 , 对于原项目的ts编译器做了多个编译器的研究 , 经过筛选 , 共有三种ts编译器入选 , 分别是 , ts-loader , babel-loader , swc-loader , 此次测试都是在webpack v5.56.0的环境下进行

编译器测试

1. ts-loader

首先先来测试ts-loader

测试代码如下

// webpack.config.js
module.exports = {
  entry: [ path.resolve('./src/demo.ts')],
  mode: 'none',
  output: {
    path: path.join('./dist'),
    publicPath: '/',
    filename: 'scripts/[contenthash:8].main.js',
    chunkFilename: 'scripts/[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[contenthash:8][ext]',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true, // 是否仅编译
            }
          },
        ]
      }
    ]
  }
}

// src/demo.ts
const a = () => {
  console.log(123);
}
a();
export default a

20次仅检测不编译耗时(ms)

683 563 581 531 559 525 757 596 535 542

552 544 650 549 538 536 568 745 537 822

最大值为822 , 最小值为525 , 平均值为595.65

20次检测+编译耗时

修改配置

// webpack.config.js
...
module: {
  rules: [
				{
            loader: 'ts-loader',
            options: {
              transpileOnly: false
            }
          },
    ]
}

在tsconfig.json里面

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false, // 这里一定要加
    "esModuleInterop": true,
    "module": "esnext",
    "sourceMap": true, // 这里一定要加
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

20次检测+编译耗时测试(ms)

2121 2312 2099 2087 2032 1991 2088 2079 2315 2382

2303 2295 2050 2172 2306 2427 2325 2232 2296 2505

最大值为2505 , 最小值为1991 , 平均值为2220.85

2. babel-loader

配置 .babelrc

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ],
    "@babel/preset-typescript"
  ],
}

// webpack.config.js
module: {
  rules: [
				{
            loader: 'babel-loader',
            options: {
              transpileOnly: false
            }
          },
    ]
}

20检查+编译耗时(ms)

979 966 762 723 691 705 706 747 668 664

692 640 633 689 655 704 750 851 670 641

最大值为979, 最小值为633 , 平均值为726.8

3. swc-loader

需要单独匹配swcrc配置文件

// swcrc.js
  const path = require('path')
  module.exports = {
    module: {
      type: 'es6',
      ignoreDynamic: true,
    },
    // polyfill
    env: {
      mode: 'usage', // or entry
      coreJs: 3,
      path: path.resolve(__dirname),
    }
    jsc: {
      parser: {
        syntax: 'typescript', // or ecmascript
        dynamicImport: true,
        decorators: true,
        tsx: true,
        privateMethod: false,
        functionBind: false,
        exportDefaultFrom: false,
        exportNamespaceFrom: false,
        decoratorsBeforeExport: false,
        topLevelAwait: false,
        importMeta: false
      },
      loose: true,
      target: 'es2015',
      externalHelpers: true,
      transform: { // default value is null
        legacyDecorator: true,
        decoratorMetadata: true,
        react: {
          runtime: 'automatic', // or classic
          throwIfNamespace: true,
          useBuiltins: true,
          development: isDev,
        },
      },
    },
  }

webpack配置

// webpack.config.js
const swcRC = require('./swcrc.js')
module: {
  rules: [
    {
      test: /\.ts?$/,
      exclude: /node_modules/,
      loader: 'swc-loader',
      options: swcRC
    }
  ]
}

20次开始 , 依然是检测+编译(ms)

336 308 304 287 278 542 377 264 255 269

276 268 273 280 286 323 405 261 441 319

最大值为542 , 最小值为255 , 平均值为317.6

总结

编译器	20次仅检测耗时(ms)	20检查+编译耗时(ms)
ts-loader	683 563 581 531 559 525 757 596 535 542 552 544 650 549 538 536 568 745 537 822 最大值为822 , 最小值为525 , 平均值为595.65	2121 2312 2099 2087 2032 1991 2088 2079 2315 2382 2303 2295 2050 2172 2306 2427 2325 2232 2296 2505 最大值为2505 , 最小值为1991 , 平均值为2220.85
babel-loader	-	979 966 762 723 691 705 706 747 668 664 692 640 633 689 655 704 750 851 670 641 最大值为979, 最小值为633 , 平均值为726.8
swc-loader	-	336 308 304 287 278 542 377 264 255 269 276 268 273 280 286 323 405 261 441 319 最大值为542 , 最小值为255 , 平均值为317.6

可以看出来 , swc-loader简直是倍速于babel-loader的存在 , 就算对于babel-loader这个多年的loader大佬也是大败其的节奏 , 但是对于升级是不是就要选择swc-loader呢 , 单从ts的编译速度来说 , swc-loader的确是无二的选择的 , 但是考虑到一些babel插件重度使用的项目 , 还是不建议直接改用swc-loader ;

补充

目前项目的优化方面主要体现在打包编译方面 , 主要考虑到打包和polyfill , 目前向着swc-loader+esbuild+webpack进行打包编译处理 ;

不说了 , 搬砖(升级项目去了)