代码转换babel、SWC、ESBuild
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item
概念
目前
webpack构建过程中，相对耗时的两个部分，第一部分就是代码转换；第二部分就是代码压缩，所以无论是切换到swc还是切换到esbuild，还是一直使用的babel，我们最终的目标。- 项目能够顺利构建
- 构建产物代码能够正常运行
- 构建时间尽可能的短
- 构建产物尽可能的小
所以我们是可以去组合使用
swc、esbuild、babel、terser，通过不同的组合去达成我们最终的目标代码转换
代码转换的目的，目前主要有两个
- ts转换成js
- js高版本转换成js低版本，保证兼容性
转换工具优缺点
babel: 基于Nodejs，现在使用最多的js代码转换工具- 优点: 功能最全，覆盖场景最广，最成熟，支持输出es5、es6+代码，支持动态polyfill
- 缺点: 转换速度相对较慢
swc: 基于Rust，用来取代babel的js代码转换工具- 优点: 相对
babel快20-70倍，另外支持文件打包，支持输出es5、es6+代码，支持动态polyfill - 缺点: 配套周边相对没有
babel成熟，基于rust对上手难度大
esbuild: 基于Go,用来快速转换js的工具- 优点: 相对
babel快10-100倍，另外支持文件打包，支持输出es6+代码，不支持动态polyfill - 缺点: 配套周边相对没有
babel成熟，基于Go对上手难度大、不支持输出es5代码
tsc: 基于Nodejs，typescript内置的转换器- 优点: 相对babel有ts类型检查，速度慢于babel，支持输出es5、es6+代码，不支持动态polyfill
- 缺点: 速度慢，不支持取消类型检查
转换速度
esbuild > swc > babel > tsc功能齐全
babel > tsc > swc > esbuild代码压缩
js代码压缩，主要有两个目的
- 减少代码尺寸，以达到访问速度提升目的
- 混淆代码，防止js源代码在一定程度上的泄漏
压缩工具优缺点
teser: 基于Nodejs，由uglifyfork出来的新一代压缩工具- 优点: 功能齐全，支持
tree-shaking，压缩比率最高 - 缺点: 速度相对较慢
esbuild: 基于Go,支持js代码压缩- 优点: 速度快
- 缺点: 压缩比率相对
terser低，压缩时如果target设置成es5，js代码内不能出现es6+代码，不然会报错
swc: 基于Rust，支持js代码压缩- 优点: 速度快
- 缺点: 压缩比率相对
terser低
目前三者关于压缩率与压缩时间：
- 压缩率
terser>esbuild>swc
- 压缩时间
esbuild>swc>terser
esbuild与swc区别
- esbuild不能输出es5、不支持按需polyfill
- swc不支持less、saas等、不支持图片处理等，不能够处理.vue；
