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

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')})// 新版esbuild改名了为 EsbuildPlugin()new require('esbuild-loader').EsbuildPlugin({...})]
]

.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 提升比例明显。