Webpack + swc + esbuild 优化构建速度尝试

依赖

• webpack@5.74.0
• @swc/core@1.3.17 (1.3.14版本有问题)
• esbuild@0.15.14
• swc-loader@0.2.3
• esbuild-loader@2.20.0

方案

webpack 打包过程中影响构建时间的主要为babel，和代码压缩。因此针对这两方面进行方案替代。
swc 替代babel做代码polyfill。
由于swc只能压缩js，因此使用esbuild 做js，css压缩。

webpack 配置

module: {
	rules: [
		{
			test: /\.js/,
			use: {
				loader: 'swc-loader'
			}
		}
	]
	...
},
...
optimization: [
	minimizer: [
		new require('esbuild-loader').ESBuildMinifyPlugin({
			target: ['chrome49'],// target: 'es2015'  重要
			legalComments: 'none', // 去除注释
			css: true, // 压缩css
			// implementation: require('esbuild')
		})
	]
]

.swcrc (swc配置文件)

{
	"env": {
		"targets": {
			"chrome": "49"
		},
		"mode": "entry",
		"coreJs": "3.24"
	}
}

注意点

ESBuildMinifyPlugin的 配置中加上target。
因为我在压缩css时发现，esbuild会把top:0;right:0;bottom:0;left:0; 转换成inset: 0; inset 是top/right/bottom/left 的复合属性，但是兼容性 chrome > 87。在低版本浏览器就失效。

结果

打包时间 5s => 1.5s 提升比例明显。