fix: minify polyfill chunks

CyanSalt · May 8, 2023 · 7e5e74d · 7e5e74d
1 parent 6a0fc35
commit 7e5e74d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -8,11 +8,11 @@ As for performance, for reference, the results of my tests on a huge private pro
 
 | | Without legacy browsers support | With `@vitejs/plugin-legacy` | With `vite-plugin-legacy-swc` |
 | --- | --- | --- | --- |
-| CPU Time | 119.43s | 407.01s | 232.26s |
-| Asset Size* | 31M | 41M | 43M |
-| Asset Size Without Legacy Chunks | 31M | 31M | 32M |
+| 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 43% of time and increases asset size by only 3% ~ 5%**.
+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.*
 

diff --git a/src/index.ts b/src/index.ts
@@ -439,10 +439,30 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           needPolyfills,
         }),
       }
+      const minifyOptions: JsMinifyOptions = {
+        compress: {
+          // Different defaults between terser and swc
+          dead_code: true,
+          keep_fargs: true,
+          passes: 1,
+        },
+        mangle: true,
+        safari10: true,
+        ...resolvedConfig.build.terserOptions as JsMinifyOptions,
+        sourceMap: Boolean(opts.sourcemap),
+        module: opts.format.startsWith('es'),
+        toplevel: opts.format === 'cjs',
+      }
       const transformResult = await swc.transform(raw, {
         ...swcOptions,
         inputSourceMap: undefined, // sourceMaps ? chunk.map : undefined, `.map` TODO: moved to OutputChunk?
+        minify: Boolean(resolvedConfig.build.minify && minifyOptions.mangle),
         jsc: {
+          // mangle only
+          minify: {
+            ...minifyOptions,
+            compress: false,
+          },
           transform: {
             optimizer: {
               globals: {
@@ -460,21 +480,12 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       const result = await swc.print(plugin(ast), {
         ...swcOptions,
         inputSourceMap: transformResult.map,
-        minify: Boolean(resolvedConfig.build.minify),
+        minify: Boolean(resolvedConfig.build.minify && minifyOptions.compress),
         jsc: {
+          // compress only
           minify: {
-            compress: {
-              // Different defaults between terser and swc
-              dead_code: true,
-              keep_fargs: true,
-              passes: 1,
-            },
-            mangle: true,
-            safari10: true,
-            ...resolvedConfig.build.terserOptions as JsMinifyOptions,
-            sourceMap: Boolean(opts.sourcemap),
-            module: opts.format.startsWith('es'),
-            toplevel: opts.format === 'cjs',
+            ...minifyOptions,
+            mangle: false,
           },
         },
       })
@@ -690,7 +701,7 @@ async function buildPolyfillChunk({
   rollupOutputOptions: NormalizedOutputOptions,
   excludeSystemJS?: boolean,
 }) {
-  let { assetsDir } = buildOptions
+  let { minify, assetsDir, terserOptions, sourcemap } = buildOptions
   const res = await build({
     mode,
     // so that everything is resolved from here
@@ -729,6 +740,35 @@ async function buildPolyfillChunk({
   if (!('output' in rollupOutput)) return
   const polyfillChunk = rollupOutput.output[0]
 
+  if (minify) {
+    const swc = await loadSwc()
+    const sourceMaps = Boolean(sourcemap)
+    const minifyOptions: JsMinifyOptions = {
+      compress: {
+        // Different defaults between terser and swc
+        dead_code: true,
+        keep_fargs: true,
+        passes: 1,
+      },
+      mangle: true,
+      safari10: true,
+      ...terserOptions as JsMinifyOptions,
+      sourceMap: sourceMaps,
+    }
+    const minifyResult = await swc.transform(polyfillChunk.code, {
+      swcrc: false,
+      configFile: false,
+      sourceMaps,
+      inputSourceMap: polyfillChunk.map ? polyfillChunk.map.toString() : undefined,
+      minify: true,
+      jsc: {
+        // mangle only
+        minify: minifyOptions,
+      },
+    })
+    Object.assign(polyfillChunk, minifyResult)
+  }
+
   // associate the polyfill chunk to every entry chunk so that we can retrieve
   // the polyfill filename in index html transform
   for (const key of Object.keys(bundle)) {