基于webpack3实际项目，swc与babel对比

背景

在平时的大型旧后台项目开发中，大型后台的启动非常慢，所有有了此次的调研来验证是否可以采用swc做局部提升。

此次测试是 fork 官方的测试demo，在此基础上修改的，基于@swc/[email protected]

swc支持语法转换范围

最低支持es3，支持@babel/preset-env所有语法，支持stage3 proposals的语法

原生不支持vue jsx，有第三方插件swc-plugin-vue-jsx但是下载量不高

对比

对指定文件的编译速度对比

更多可看 swc.rs/blog/perf-s...

基于后台项目构建对比

babel-loader

swc-loader

总结

并行解析

thread-loader

基于swc-loader在并行时的优异表现，所以有了并行解析的简单测试

原始（babel-loader）

babel-loader + thread-loader

swc-loader swc自带并行，开启即可

vue-loader + babel-loader 都使用thread-loader

vue-loader + thread-loader，swc-loader并行

webpack配置

js 复制代码

const cpuCount = require('os').cpus().length - 1;
const threadLoader = {
    loader: 'thread-loader',
    options: {
        workers: cpuCount
    }
};
 
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    // threadLoader,
                    // 'babel-loader',
                    'swc-loader'
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    // threadLoader,
                    {
                        loader: 'vue-loader',
                        options: {
                            loaders: {
                                // js: `thread-loader?{"workers": cpuCount}!babel-loader`
                                js: 'swc-loader'
                            }
                        }
                    }
                ]
            }
        ]
    }
}

如何接入swc-loader

npm install swc-loader @swc/core -D
配置webpack和.swcrc

js 复制代码

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'swc-loader',
                options: {
                    sync: true
                },
                include: [resolve('src')]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        js: 'swc-loader?{"sync":true}'
                    }
                }
            },
        ]
    }
}

.swcrc 复制代码

{
    "parser": {
        "syntax": "ecmascript",
        "jsx": true
    },
    "transform": {
        "react": {
            "runtime": "classic",
            "pragma": "h"
        }
    },
    "env": {
        "targets": ["> 1%", "last 2 versions", "not ie <= 8"]
    }
}

结论

在实际项目中swc与babel差别并不大，并且对vue jsx支持一般，不建议接入
可以在耗时长的loader使用thread-loader获得提升，给vue-loader和babel-loader加上thread-loader提升是比较明显的，在编译阶段（去除了代码优化压缩阶段，以npm run dev的执行时间为参考）有大概35%的提升

参考：
swc.rs/docs/gettin...
github.com/kdy1/benchm...