使用swc 替换ts-loader 加速构建webpack-vue-tsx项目

环境

• webpack@5.74.0
• @swc/core@1.3.11
• @babel/core@7.19.1.
• vue@2.7.10

使用swc编译ts，tsx代码

根据swc官网文档，@swc/core – SWC我们可以用swc-loader 替换 ts-loader。
swc 配置为

.swcrc

{
	//... 省略
	"jsc": {
		"syntax": "typescript",
		"tsx": true,
		"decorators": false,
		"dynamicImport": false
	},
	"transform":{
		"react": {
			"pragama": "h",// 方法名称 官网例子为React.createElement。这里vue 用h
			"throwIfNamespace": true,
			"development": false,
			"useBuiltins": false
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

---

2022.11.25更新

配置会成功将你的 tsx代码转换成

=转换=>h(‘div’)
但是：会将作用域中同名变量更名，例如在vue2中：

export default {
  render:(h) => <div></div> 
}
// 转换后 
export default {
  render:(h1) => h('div'); // 方法形参编译后被改成h1 了！！！
} 
1
2
3
4
5
6
7

这样就导致控制台报错h方法找不到

挣扎：

解决方案1

window上挂载h = vue导出的h js // main.js import {h} from 'vue'; window.h = h;

解决方案2

使用webpack.DefinePlugin 先更改swc配置，将方法名写特殊一点 如transform.react.pragama: 'Vue_createElement' 然后在webpack 配置中添加:

new DefinePlugin({ 	
  'Vue_createElement': 'h' // 将代码中"Vue_createElement" 的字符串替换为 "h" 
}) 
1
2
3

仍存在问题:

tsx中，不能按react 的方式转换代码，vue props 无法传递。

暂时解决

• 直接使用 h() 函数构建代码。这里要注意props 与v-on 的传递方式
• tsx 使用babel 配合transform-vue-jsx 插件转换。

---

2023.4.20更新

对于vue3
swc-plugin-vue-jsx 可以转换jsx代码
Vue2
暂未找到

---

2023.8.3更新

swc-plugin-another-transform-imports 可以替代babel-plugin-import

---

使用Babel 处理按需引入

由于swc 现在没有类似babel-plugin-import 之类的插件。因此，我们仍要使用babel-plugin-import 类按需引入ant-design-vue这类的库
因此，我将按需引入的代码都写到一个ts文件中，然后在webpack.config.js中配置如下：

webpack.config.js

// ... 省略
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },{
            test: /vueComponents\.ts$/,
            include: /src/, // 这个文件就放在/src/vueComponents.ts
            loader: 'babel-loader',
        },{
            test: /\.(j|t)sx?$/,
            loader: 'swc-loader',
        }
    ]
}
// ... 省略
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

项目需要按需引入的组件库都写在这个文件中。

vueComponents.ts

import {Button,...} from 'ant-design-vue';
Vue.use(Button);
...
1
2
3

babel.config.js

这个应该比较熟悉了，使用 babel-plugin-import 按需引入。
若支持按需引入，官网一般都会提供例子，这里就不列了。

---

这样，有按需引入代码的文件走babel-loader，其他文件都走swc-loader

结尾

处理到这，影响构建速度的剩下 vue-loader 与 代码压缩 。

• 提升vue-loader的速度没有什么明显的方法，一般配合thread-loader 执行。
• 代码压缩可使用esbuild，因为它还能压缩css。我之前有试过 Webpack + swc + esbuild 优化构建速度尝试。

最终项目架构

• webpack5
• typescript
• vue3
• swc
• swc-plugin-vue-jsx
• swc-plugin-another-transform-imports
• esbuild 做css压缩
• less
• terser-webpack-plugin 用swc做压缩
  ​