背景
在平时的大型旧后台项目开发中,大型后台的启动非常慢,所有有了此次的调研来验证是否可以采用swc做局部提升。
此次测试是 fork 官方的测试demo,在此基础上修改的,基于@swc/core@1.2.57
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配置
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
// 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