feat(plugin-legacy): add externalSystemJS option (#5024)

Author: OrekiSH

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:

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

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<string>} 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";`)
         )
       }
     }