在一次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次检测+编译耗时
修改配置
// 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 | 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 |
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这个多年的loader大佬也是大败其的节奏 , 但是对于升级是不是就要选择swc-loader呢 , 单从ts的编译速度来说 , swc-loader的确是无二的选择的 , 但是考虑到一些babel插件重度使用的项目 , 还是不建议直接改用swc-loader ;
不说了 , 搬砖了(升级项目去了)