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

背景

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

此次测试是 fork 官方的测试demo,在此基础上修改的,基于@swc/core@1.2.57

swc支持语法转换范围

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

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

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

对比

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

基于webpack3实际项目,swc与babel对比
基于webpack3实际项目,swc与babel对比
更多可看 swc.rs/blog/perf-s…

基于后台项目构建对比

babel-loader
基于webpack3实际项目,swc与babel对比

swc-loader
基于webpack3实际项目,swc与babel对比

总结
基于webpack3实际项目,swc与babel对比

并行解析

thread-loader 

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

原始(babel-loader)
基于webpack3实际项目,swc与babel对比

babel-loader + thread-loader
基于webpack3实际项目,swc与babel对比

swc-loader swc自带并行,开启即可
基于webpack3实际项目,swc与babel对比

vue-loader + babel-loader 都使用thread-loader
基于webpack3实际项目,swc与babel对比

vue-loader + thread-loader,swc-loader并行
基于webpack3实际项目,swc与babel对比

webpack配置

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

  1. npm install swc-loader @swc/core -D
  2. 配置webpack和.swcrc
// 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}'
                    }
                }
            },
        ]
    }
}
{
    "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…

原文链接:https://juejin.cn/post/7340156587721539636 作者:AuSjukwa

(0)
上一篇 2024年2月28日 上午10:32
下一篇 2024年2月28日 上午10:43

相关推荐

发表回复

登录后才能评论