swc兼容polyfill的权衡与选择
背景
开门尖山,swc 目前在 polyfill 上存在一些问题:
es2022 不支持
当使用 es2022 特性(如 array.at
)时(目前未发布),无论使用哪种 swc 提供的 polyfill 策略(usage
/ entry
),都无法提供 es2022 的 polyfill (其中 entry
策略最多提供至 es2021 )。
swc polyfill 查询列表已过时
swc 的 polyfill 策略是自己维护了一份 core-js-compat
的 modules-by-versions.json
列表(已过时),无法即时同步上游 core-js
的最新 polyfill 变动。
swc polyfill 未积极维护
swc 长时间未积极维护 polyfill 功能模块。
综上所述,我们当前使用任何 swc 的 polyfill 策略均不是最优解。
下面我们将探求权衡一种相对最优的 swc polyfill 解法。
解法
幸运的是,swc 提供了手动声明需要导入的 polyfill 选项,即 env.include
( Additional Options - include ),通过指定所需 polyfill modules 列表即可达到预期。
先安装所需依赖:
pnpm add browserslist core-js core-js-compat
实现自动获取 polyfill modules :
// getPolyfills.tsimport browserslist from 'browserslist'export const getPolyfills = () => {// ↓ 项目的根目录,会从这里自动寻找 browserslistrc 配置const root = process.cwd()const env = process.env.NODE_ENVconst browsers = browserslist(undefined, { path: root, env })const { list } = require('core-js-compat')({targets: browsers,// ↓ 此处必须指定 core-js 的 前两位 具体版本,如 `3.20` / `3.21` ,否则会 polyfill 不完全!version: '3.21',})// ['es.error.cause', 'es.aggregate-error', 'es.aggregate-error.cause', ...]return list as string[]
}
注:
若无需自动
browserslistrc
配置,可改为手动指定browsers
(如['chrome 80']
)。当读取不到
browserslistrc
配置时,默认使用defaults
配置,详见 browserslist / browserslist 。
最终传入 swc 配置即可:
// .swcrc 片段import { getPolyfills } from './getPolyfills'{"env": {"include": getPolyfills()}
}
到此为止,swc 便可自动注入所有我们通过 browserslistrc
配置的 targets 对应的 polyfill,注意是全量注入,类似于 babel 的 entry
策略。
总结
使用 swc 的快速,必然会带来一些 side effect,我们需要在其中权衡和选择,本质上是一种 trade off 。
产物大小权衡
由于是全量导入 polyfill,不是按需策略,所以产物体积会增大 100KB - 200KB
,但现代如此快速的网络环境之下,对比 swc 带给我们的编译速度收益,也是可以接受的。
当然我们也可以指定更高阶的 targets ,来减少 polyfill 的量,如使用:
// .browserslistrcchrome 80
这种较高的 targets 会得到相对较小的产物体积。
对比 esbuild
swc 的 polyfill 策略一大好处是他可以把注入策略放入框架层,而无需让用户感知到,因为类 babel 的 entry
策略均需要 “显示” 的在项目代码内声明 core-js
导入,这会让使用者感到不适。
定位为 babel 替代的 swc 相对比定位为转译器的 esbuild ,esbuild 则不能很好的在框架层解决这个问题(umijs
等可以提供中间层代码的框架除外)。
其他
core-js-compat:modules-by-versions.json
swc issue #1604:Direct usage of core-js-compat
swc issue #2607:swc not polyfill string.replaceAll
终局
由于 swc 是作者大学时期的作品,且作者也认为其架构较为混乱,正准备重构的工作,预计未来,我们会看到更好的 swc ,不需要这么多的 workaround 和 trade off,真正迈向替代 babel 的道路。
再见,babel !
swc兼容polyfill的权衡与选择相关推荐
- 微型计算机的台式兼容是,微型计算机的台式兼容机是自己根据需要选择各个部件,配置出自己的计算机...
微型计算机的台式兼容机是自己根据需要选择各个部件,配置出自己的计算机 更多相关问题 边际技术替代率的概念及递减规律. 所有的Y系列的三相异步电动机属于高耗能落后机电设备(产品). 边际替代率的概念及边 ...
- ES6 Proxy兼容polyfill实现
2019独角兽企业重金招聘Python工程师标准>>> Proxy 可以拦截对象的读取.修改遍历等操作,这个polyfill只支持get和set. 通过defineProperty和 ...
- html 自动输入日期,Js日期选择自动填充到输入框(界面漂亮兼容火狐)
很漂亮.兼容火狐的Js日期选择,自动填充到输入框 body{font-size:12px;font-family:Verdana,Arial,"宋体";} a:link {colo ...
- 导出jar插件_利用类加载器解决不兼容的Jar包共存的问题
问题描述 应用稍复杂一点之后,往往要引入多种不同的中间件,各种第三方jar,这就导致我们往往会遇到jar包冲突的问题,如果冲突的jar包是兼容的,我们需要选择合适的版本,把不合适的版本排除掉,虽然过程 ...
- 页面上一些小icon的制作方法及技术选择
我们经常切片的时候,看到一些小图标,都有些心头小烦.当然我们一般为了兼容多款浏览器.选择保守的切图拼成雪碧图.然后通过background-position去定位到你想要用的图标. 随着我们一步步摒弃 ...
- 爱上Android之选择您的开发工具
本文摘自人民邮电出版社异步社区<爱上Android> 京东地址:item.jd.com/12144527.ht- 试读地址:www.epubit.com.cn/book/detail- 第 ...
- c语言在win8系统不兼容,Win8系统中存在不兼容软件怎么办?
有些软件在WinXP可以兼容,但是一旦到了Win8系统就不能兼容了,可是很多用户又不愿意放弃这些软件,于是很头疼,那么当你遇到Win8系统中存在不兼容软件怎么办?不知道的朋友赶紧看看小编整理的Win8 ...
- 7-1 活动选择问题 (25 分)(思路+详解+扩展)宝 今天你AC了吗!!!
一:题目 假定一个有n个活动(activity)的集合S={a 1 ,a 2 ,-,a n },这些活动使用同一个资源(例如同一个阶梯教室),而这个资源在某个时刻只能供一个活动使用.每个活 ...
- 两个offer如何做选择?年薪20万vs年薪15万
前些天和一个年轻的朋友谈跳槽.朋友说她需要在两个offer里面做选择.一个是年薪20万的职位,一个是年薪15万的职位.她更喜欢后者的节奏与内容,却被前面稍高的工资吸引.我们仔细算了一下她的工作时间:前 ...
最新文章
- 部署Chromedriver
- c# socket接收字符串_Python高级编程之 Socket 编程
- ajax原理 博客,AJAX工作基本原理
- 找回丢失的端星网络客户端
- java学习(107):StringBuilder
- python卸载干净_Python卸载不干净?Mac完全卸载python方法
- 诺基亚n1支持java功能_关于诺基亚N1你必须要了解这10个问题!
- cesium 漫游飞行_cesium 之三维漫游飞行效果实现篇(附源码下载)
- DBeaver - 一款免费开源的通用数据库工具
- WebRTC音频处理流程简介
- 深度估计 双目深度估计+单目深度估计 ONNX运行程序
- Lake Shore Cernox低温温度传感器之温度探头
- 【工具】kindle 怎么用微信读书
- Android项目集成穿山甲开屏/插屏/横幅广告教程大全
- RK1126从入门到放弃:番外篇(二)Win10 WSL系统下编译buildroot报错不支持SYSV IPC,导致fakeroot无法正常工作
- ArcGIS—数据类型(1):Coverage数据
- 软件测试中的白盒测试分析
- Enable MMC3 interface On Am57xx
- PYTHON 中的多线程
- c# 搜狗拼音输入法,刷输入速度和累计输入
热门文章
- 【C语言】单向链表排序、合并、逆序、分离(链表的头节点不储存数据)
- drawrect java_Java Graphics.drawRect方法代码示例
- 新媒之家是怎么带我走向成功?
- 新的EE架构面临的挑战以及带来的影响
- 学琴牢记这十条:你可以找到一个好的吉他导师
- 04-【kubernetes】Devops核心要点及Kubernets架构概述
- 有Bug?你的代码神兽选对了吗
- svn解决冲突Postpone , Accept base, Accept incoming, Reject incoming, Accept incoming for conflictsu区别
- 【AI赋能】人工智能在自动驾驶时代的应用
- Reboot and select proper boot device