Bundle size bigger than minifying with TerserPlugin

[mavridiSS]

If I replace the minimizer in below config with new SwcMinifyWebpackPlugin({sourceMap: false}) the bundle size increases(17.2MB -> 18.2MB). Any idea why and how can I improve it as I want to leverage the speed of SwcMinifyWebpackPlugin

const pkg = require('package.json');

const rev = exec('git rev-parse HEAD', true);
const getBanner = () => {
  return `${pkg.name} v${pkg.version}-${rev}`;
};

module.exports = {
  target: 'web',
  mode: 'production',
  entry: [
    '@heydoc/ui/dist/style.css',
    '@heydoc/ui/dist/calendar.css',
    './src/index',
    './src/styles/global.scss',
  ],

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'app-[chunkhash].js',
    assetModuleFilename: 'assets/[name][ext]',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/env'],
              plugins: ['transform-class-properties', 'angularjs-annotate'],
            },
          },
          {
            loader: path.join(__dirname, 'templateurl-loader'),
            options: {
              baseUrl: 'src/angular',
            },
          },
        ],
      },
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.html$/,
        loader: 'raw-loader',
        options: {
          esModule: false,
        },
      },
      {
        test: /\.scss$/,
        include: [
          path.resolve(__dirname, '../src/styles'),
          path.resolve(__dirname, '../node_modules'),
          path.resolve(__dirname, '../../../node_modules/bootstrap-sass'),
        ],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: false,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                precision: 10,
                quietDeps: true,
              },
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        exclude: [
          path.resolve(__dirname, '../src/styles'),
          path.resolve(__dirname, '../node_modules'),
          path.resolve(__dirname, '../../../node_modules/bootstrap-sass'),
        ],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
              importLoaders: 1,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                precision: 10,
                quietDeps: true,
              },
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: false,
            },
          },
        ],
      },
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext]',
        },
      },
      {
        test: /\.(svg|png|gif|jpg|ico)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name][ext]',
        },
      },
    ],
  },

  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss', '.css'],
    // https://github.com/react-dnd/react-dnd/issues/3423 -
    fallback: {
      'react/jsx-runtime': 'react/jsx-runtime.js',
      'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'body',
    }),

    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),

    new MiniCssExtractPlugin({
      filename: 'style-[chunkhash].css',
    }),

    new CopyPlugin({
      patterns: [
        {
          context: path.resolve(__dirname, '../../src/assets'),
          from: '**/*',
          to: './assets',
        },
        {
          context: path.resolve(__dirname, '../../src/assets'),
          from: 'favicon(-red|-green|).ico',
        },
        {
          from: path.resolve(
            path.dirname(require.resolve('tinymce')),
            'skins',
            'ui',
            'tinymce-5'
          ),
          to: './assets/skins/lightgray',
        },
        {
          from: path.resolve(path.dirname(require.resolve('tinymce')), 'skins'),
          to: './assets/tinymce/skins',
        },
        {
          from: path.resolve(
            path.dirname(require.resolve('pdfjs-dist')),
            'pdf.worker.js'
          ),
          to: './pdf.worker.js',
        },
      ],
    }),
    new webpack.BannerPlugin({
      banner: getBanner,
    }),

  ],

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          sourceMap: false,
        },
      }),
    ],
  },

  stats: { children: false },
};

[guoyunhe]

That is exactly as expected! Terser is slower but has smaller output. You can tweak some SWC options but the result can be disappointing. SWC's main focus is speed. (same as esbuild) Here is nothing we can do in this plugin. You can checkout some discussions from SWC's repo.