feat: configure default minimizer for both Rspack & webpack (#1258)

Author: jbroma

.changeset/chatty-seas-grab.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Configure the default minimizer for Rspack and webpack configuration

.changeset/tall-towns-pay.md

@@ -96,6 +96,7 @@
     "pretty-format": "^26.6.2",
     "react-refresh": "^0.14.0",
     "schema-utils": "^4.2.0",
+    "semver": "^7.7.2",
     "shallowequal": "^1.1.0",
     "tapable": "^2.2.1",
     "terser-webpack-plugin": "^5.3.14",
@@ -119,6 +120,7 @@
     "@types/mime-types": "^2.1.1",
     "@types/node": "catalog:",
     "@types/react-dom": "^17.0.7",
+    "@types/semver": "^7.7.0",
     "@types/shallowequal": "^1.1.1",
     "babel-jest": "^29.7.0",
     "clang-format": "^1.8.0",

packages/repack/package.json

@@ -6,6 +6,7 @@ import { makeCompilerConfig } from '../makeCompilerConfig.js';
 
 jest.mock('../getConfigFilePath.js');
 jest.mock('../loadProjectConfig.js');
+jest.mock('../getMinimizerConfig.js');
 jest.mock('../validatePlugins.js');
 
 const setupMocks = () => {

packages/repack/src/commands/common/config/__tests__/makeCompilerConfig.test.ts

@@ -0,0 +1,60 @@
+import semver from 'semver';
+
+// prefer `terser-webpack-plugin` installed in the project root to the one shipped with Re.Pack
+async function getTerserPlugin(rootDir: string) {
+  let terserPluginPath: string;
+  try {
+    terserPluginPath = require.resolve('terser-webpack-plugin', {
+      paths: [rootDir],
+    });
+  } catch {
+    terserPluginPath = require.resolve('terser-webpack-plugin');
+  }
+  const plugin = await import(terserPluginPath);
+  return 'default' in plugin ? plugin.default : plugin;
+}
+
+async function getTerserConfig(rootDir: string) {
+  const TerserPlugin = await getTerserPlugin(rootDir);
+  return new TerserPlugin({
+    test: /\.(js)?bundle(\?.*)?$/i,
+    extractComments: false,
+    terserOptions: {
+      format: { comments: false },
+    },
+  });
+}
+
+// use SwcJsMinimizerRspackPlugin for Rspack 1.5.0 and above
+function shouldUseTerserForRspack(rspackVersion: string): boolean {
+  const version = semver.coerce(rspackVersion) ?? '0.0.0';
+  return semver.lt(version, '1.5.0');
+}
+
+async function getWebpackMinimizer(rootDir: string) {
+  return [await getTerserConfig(rootDir)];
+}
+
+async function getRspackMinimizer(rootDir: string) {
+  const rspack = await import('@rspack/core');
+  return [
+    shouldUseTerserForRspack(rspack.rspackVersion)
+      ? await getTerserConfig(rootDir)
+      : new rspack.SwcJsMinimizerRspackPlugin({
+          test: /\.(js)?bundle(\?.*)?$/i,
+          extractComments: false,
+          minimizerOptions: {
+            format: { comments: false },
+          },
+        }),
+  ];
+}
+
+export async function getMinimizerConfig(
+  bundler: 'rspack' | 'webpack',
+  rootDir: string
+) {
+  return bundler === 'rspack'
+    ? getRspackMinimizer(rootDir)
+    : getWebpackMinimizer(rootDir);
+}

packages/repack/src/commands/common/config/getMinimizerConfig.ts

@@ -1,6 +1,11 @@
-import TerserPlugin from 'terser-webpack-plugin';
+import { getMinimizerConfig } from './getMinimizerConfig.js';
+
+export async function getRepackConfig(
+  bundler: 'rspack' | 'webpack',
+  rootDir: string
+) {
+  const minimizerConfiguration = await getMinimizerConfig(bundler, rootDir);
 
-export function getRepackConfig() {
   return {
     devtool: 'source-map',
     output: {
@@ -13,20 +18,7 @@ export function getRepackConfig() {
     },
     optimization: {
       chunkIds: 'named',
-      minimizer: [
-        // TODO: remove this default in favour explicit configuration in webpack
-        // and implicit configuration in rspack using SwcJsMinimizerRspackPlugin
-        // once https://github.com/web-infra-dev/rspack/issues/11183 is resolved
-        new TerserPlugin({
-          test: /\.(js)?bundle(\?.*)?$/i,
-          extractComments: false,
-          terserOptions: {
-            format: {
-              comments: false,
-            },
-          },
-        }),
-      ],
+      minimizer: minimizerConfiguration,
     },
   };
 }

packages/repack/src/commands/common/config/getRepackConfig.ts

@@ -43,7 +43,7 @@ export async function makeCompilerConfig<C extends ConfigurationObject>(
   const commandConfig = getCommandConfig(command, bundler);
 
   // get defaults that will be applied on top of built-in ones (Rspack/webpack)
-  const repackConfig = getRepackConfig();
+  const repackConfig = await getRepackConfig(bundler, rootDir);
 
   // load the project config
   const rawConfig = await loadProjectConfig<C>(configPath);