diff --git a/packages/plugin-legacy/README.md b/packages/plugin-legacy/README.md index f26db1581d3657..c56b769061e267 100644 --- a/packages/plugin-legacy/README.md +++ b/packages/plugin-legacy/README.md @@ -122,6 +122,13 @@ export default { } ``` +### `externalSystemJS` + +- **Type:** `boolean` +- **Default:** `false` + + Defaults to `false`. Enabling this option will exclude `systemjs/dist/s.min.js` inside polyfills-legacy chunk. + ## Dynamic Import The legacy plugin offers a way to use native `import()` in the modern build while falling back to the legacy build in browsers with native ESM but without dynamic import support (e.g. Legacy Edge). This feature works by injecting a runtime check and loading the legacy bundle with SystemJs runtime if needed. There are the following drawbacks: diff --git a/packages/plugin-legacy/index.d.ts b/packages/plugin-legacy/index.d.ts index 1e2c1b81f08cd1..612e6cacda9702 100644 --- a/packages/plugin-legacy/index.d.ts +++ b/packages/plugin-legacy/index.d.ts @@ -22,6 +22,10 @@ export interface Options { * default: true */ renderLegacyChunks?: boolean + /** + * default: false + */ + externalSystemJS?: boolean } declare function createPlugin(options?: Options): Plugin diff --git a/packages/plugin-legacy/index.js b/packages/plugin-legacy/index.js index fbcb6789761086..a0a44499e34822 100644 --- a/packages/plugin-legacy/index.js +++ b/packages/plugin-legacy/index.js @@ -124,7 +124,8 @@ function viteLegacyPlugin(options = {}) { modernPolyfills, bundle, facadeToModernPolyfillMap, - config.build + config.build, + options.externalSystemJS, ) return } @@ -154,7 +155,8 @@ function viteLegacyPlugin(options = {}) { facadeToLegacyPolyfillMap, // force using terser for legacy polyfill minification, since esbuild // isn't legacy-safe - config.build + config.build, + options.externalSystemJS, ) } } @@ -533,7 +535,8 @@ async function buildPolyfillChunk( imports, bundle, facadeToChunkMap, - buildOptions + buildOptions, + externalSystemJS ) { let { minify, assetsDir } = buildOptions minify = minify ? 'terser' : false @@ -542,7 +545,7 @@ async function buildPolyfillChunk( root: __dirname, configFile: false, logLevel: 'error', - plugins: [polyfillsPlugin(imports)], + plugins: [polyfillsPlugin(imports, externalSystemJS)], build: { write: false, target: false, @@ -582,7 +585,7 @@ const polyfillId = 'vite/legacy-polyfills' * @param {Set} imports * @return {import('rollup').Plugin} */ -function polyfillsPlugin(imports) { +function polyfillsPlugin(imports, externalSystemJS) { return { name: 'vite:legacy-polyfills', resolveId(id) { @@ -594,7 +597,7 @@ function polyfillsPlugin(imports) { if (id === polyfillId) { return ( [...imports].map((i) => `import "${i}";`).join('') + - `import "systemjs/dist/s.min.js";` + (externalSystemJS ? '' : `import "systemjs/dist/s.min.js";`) ) } }