Tradeoff and selection of SWC compatible Polyfill

background

Kaimen Jianshan ,swc Currently in polyfill There are some problems in ：

es2022 I won't support it

When using es2022 characteristic （ Such as array.at） when （ Currently not released ）, Whatever you use swc Provided polyfill Strategy （usage / entry）, Can't provide es2022 Of polyfill （ among entry Policies are available up to es2021 ）.

swc polyfill The query list is out of date

swc Of polyfill The strategy is to maintain a core-js-compat Of modules-by-versions.json list （ Deprecated ）, Unable to instantly synchronize upstream core-js The latest polyfill change .

swc polyfill Not actively maintained

swc Not actively maintained for a long time polyfill Function module .

in summary , We currently use any swc Of polyfill None of the strategies are optimal .

Next, we will explore a relatively optimal swc polyfill solution .

solution

Fortunately, ,swc Provides the manual declaration of the polyfill Options , namely env.include （ Additional Options - include ）, By specifying the desired polyfill modules The list is what you expect .

Install the required dependencies first ：

  pnpm add browserslist core-js core-js-compat

Achieve automatic acquisition polyfill modules ：

// getPolyfills.ts

import browserslist from 'browserslist'

export const getPolyfills = () => {
    

  // ↓  The root directory of the project , Will automatically find from here  browserslistrc  To configure 
  const root = process.cwd()
  
  const env = process.env.NODE_ENV
  
  const browsers = browserslist(undefined, {
     path: root, env })

  const {
     list } = require('core-js-compat')({
    
    targets: browsers,
    // ↓  You must specify... Here  core-js  Of   Top two   Specific version , Such as  `3.20` / `3.21` , Otherwise  polyfill  Incomplete ！
    version: '3.21',
  })

  // ['es.error.cause', 'es.aggregate-error', 'es.aggregate-error.cause', ...]
  return list as string[]
}

notes ：

1. If no automatic browserslistrc To configure , It can be manually specified instead browsers （ Such as ['chrome 80']）.

2. When you can't read browserslistrc When the configuration , By default defaults To configure , See browserslist / browserslist .

Finally, it was introduced into swc The configuration can be ：

// .swcrc  fragment 

import {
     getPolyfills } from './getPolyfills'

{
    
  "env": {
    
    "include": getPolyfills()
  }
}

Only this and nothing more ,swc It can automatically inject all the data we pass through browserslistrc Configured targets Corresponding polyfill, Note that it is full injection , Be similar to babel Of entry Strategy .

summary

Use swc Fast , There must be some side effect, We need to weigh and choose among them , It's essentially a trade off .

Product size tradeoffs

Because it is full import polyfill, Not an on-demand strategy , So the volume of the product will increase 100KB - 200KB , But in such a fast modern network environment , contrast swc It brings us the benefit of compilation speed , It's also acceptable .

Of course, we can also specify higher-order targets , To reduce polyfill The amount of , If you use ：

// .browserslistrc

chrome 80

This higher targets A relatively small product volume will be obtained .

contrast esbuild

swc Of polyfill A great advantage of the strategy is that it can put the injection strategy into the framework layer , You don't need to make users feel , Because class babel Of entry Both strategies require “ Show ” In the project code core-js Import , This will make the user feel uncomfortable .

It is positioned as babel Alternative swc The relative ratio is positioned as esbuild ,esbuild This problem cannot be solved at the framework level （umijs And other frameworks that can provide middle tier code ）.

other

• core-js-compat：modules-by-versions.json

• swc issue #1604：Direct usage of core-js-compat

• swc issue #2607：swc not polyfill string.replaceAll

Finality

because swc It is the work of the author in his college days , And the author also thinks that its architecture is chaotic , Preparing to refactor , Is expected in the future , We will see better swc , You don't need so much workaround and trade off, Really move towards substitution babel The path of .

bye ,babel ！