vite-plugin-legacy-swc weekly downloads statistics

vite-plugin-legacy-swc

Provides legacy browsers support for the production build with SWC.

This package is intended to replace @vitejs/plugin-legacy in performance-sensitive situations. It is basically an implementation of vitejs/vite#4105.

As for performance, for reference, the results of my tests on a huge private project (with { modernPolyfills: true }) are as follows:

	Without legacy browsers support	With @vitejs/plugin-legacy	With vite-plugin-legacy-swc
CPU Time	146.45s	697.82s	295.04s
JS Asset Size*	9.5M	22M	21M
JS Asset Size Without Legacy Chunks	9.5M	9.6M	9.6M

Compared to @vitejs/plugin-legacy, vite-plugin-legacy-swc saves 58% of time and 4% of JS asset size.

* In my current tests, @vitejs/plugin-legacy does not generate source maps for legacy chunks correctly, so the asset size statistics exclude the source maps.

---

Vite's minimum browser support target is Native ESM, native ESM dynamic import, and import.meta. This plugin provides support for legacy browsers that do not support those features when building for production.

By default, this plugin will:

• Generate a corresponding legacy chunk for every chunk in the final bundle, transformed with @swc/core and emitted as SystemJS modules (code splitting is still supported!).

• Generate a polyfill chunk including SystemJS runtime, and any necessary polyfills determined by specified browser targets and actual usage in the bundle.

• Inject <script nomodule> tags into generated HTML to conditionally load the polyfills and legacy bundle only in browsers without widely-available features support.

• Inject the import.meta.env.LEGACY env variable, which will only be true in the legacy production build, and false in all other cases.

Usage

// vite.config.js
import legacy from 'vite-plugin-legacy-swc'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
}

Options

targets

• Type: string | string[] | { [key: string]: string }

• Default: 'last 2 versions and not dead, > 0.3%, Firefox ESR'

  It's passed on to @swc/core when rendering legacy chunks.

  The query is also Browserslist compatible. See Browserslist Best Practices for more details.

  If it's not set, plugin-legacy-swc will load the browserslist config sources and then fallback to the default value.

[!NOTE] Some browserslist queries are not supported in targets and modernTargets since SWC uses browserslist-rs. See Limitations.

modernTargets

• Type: string | string[]

• Default: 'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12'

  It's passed on to @swc/core when collecting polyfills for modern chunks. The value set here will override the build.target option.

  The query is also Browserslist compatible. See Browserslist Best Practices for more details.

  If it's not set, plugin-legacy-swc will fallback to the default value.

  Note that this options should not be set unless renderLegacyChunks is set to false.

polyfills

• Type: boolean | string[]

• Default: true

  By default, a polyfills chunk is generated based on the target browser ranges and actual usage in the final bundle (detected via @swc/core's mode: 'usage').

  Set to a list of strings to explicitly control which polyfills to include. See Polyfill Specifiers for details.

  Set to false to avoid generating polyfills and handle it yourself (will still generate legacy chunks with syntax transformations).

additionalLegacyPolyfills

• Type: string[]

  Add custom imports to the legacy polyfills chunk. Since the usage-based polyfill detection only covers ES language features, it may be necessary to manually specify additional DOM API polyfills using this option.

additionalModernPolyfills

• Type: string[]

  Add custom imports to the modern polyfills chunk. Since the usage-based polyfill detection only covers ES language features, it may be necessary to manually specify additional DOM API polyfills using this option.

modernPolyfills

• Type: boolean | string[]

• Default: false

  Defaults to false. Enabling this option will generate a separate polyfills chunk for the modern build (targeting browsers that support widely-available features).

  Set to a list of strings to explicitly control which polyfills to include. See Polyfill Specifiers for details.…