When use esbuildMinify tree shaking is not effect

[hangaoke1]

// Icon.tsx
import React from 'react';

import type { CSSProperties, FunctionComponent, SVGAttributes } from 'react';

interface Props extends Omit<SVGAttributes<SVGElement>, 'color'> {
  size?: number | string;
  color?: string | string[];
  title?: string | string[];
}

const getIconColor = (color: string | string[] | undefined, index: number, defaultColor: string) => {
  return color ? (typeof color === 'string' ? color : color[index] || defaultColor) : defaultColor;
};

const DEFAULT_STYLE: CSSProperties = {
  flexShrink: 0,
};

const defaultSize = '1em';

export const IconA: FunctionComponent<Props> = ({ size = defaultSize, color, style: _style, title, ...rest }) => {
  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

  return (
    <svg viewBox="0 0 1025 1024" width={size || '1em'} height={size || '1em'} style={style} {...rest} data-name="xiaohan">
      {title ? <title>{title}</title> : null}
      <path
        d="M1003.70432 144.128a64 64 0 0 1 5.376 90.304l-567.424 640a64 64 0 0 1-97.28-1.728L15.73632 473.792a64 64 0 1 1 98.816-81.344l280.96 341.12 517.76-584a64 64 0 0 1 90.368-5.44z"
        fill={getIconColor(color, 0, 'currentColor')}
      />
    </svg>
  );
};
export const IconB: FunctionComponent<Props> = ({ size = defaultSize, color, style: _style, title, ...rest }) => {
  const style = _style ? { ...DEFAULT_STYLE, ..._style } : DEFAULT_STYLE;

  return (
    <svg viewBox="0 0 1024 1024" width={size || '1em'} height={size || '1em'} style={style} {...rest} data-name="aaaaaaaaaaaa">
      {title ? <title>{title}</title> : null}
      <path
        d="M1024 512c0 282.752-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0s512 229.248 512 512z m-591.274667 199.978667l267.818667-169.216c21.674667-13.653333 21.674667-47.872 0-61.525334l-267.818667-169.216c-21.674667-13.653333-48.725333 3.413333-48.725333 30.72v338.474667c0 27.349333 27.050667 44.458667 48.725333 30.762667z"
        fill={getIconColor(color, 0, 'currentColor')}
      />
    </svg>
  );
};

// App.tsx
import React from 'react';
import ReactDOM from 'react-dom';

import { IconA } from './Icon';

const App: React.FC<{}> = () => {
  return (
    <div className="app">
      <h1 className="app-title">hello world</h1>
      <IconA />
    </div>
  );
};

const container = document.getElementById('root');
ReactDOM.render(<App />, container);

when use esbuildMinify，IconB will in bundle，but terserMinify work normal

new TerserPlugin({
        minify: TerserPlugin.esbuildMinify,
        // minify: TerserPlugin.terserMinify,
        terserOptions: {},
      }),

[alexander-akait]

Because treeshaking is a part of bundling, we use esbuild only as a minifier, in theory you can write a custom function using https://github.com/webpack-contrib/terser-webpack-plugin#minify option and run esbuild in a bundler mode, but you will have double bundling, it will be not fast and some optimization will not work, feel free to feedback, closed beause work as expected

[hangaoke1]

@alexander-akait I suggest adding a comment in the documentation regarding the use of esbuild compression, as it may not work effectively with webpack's tree shaking.

[alexander-akait]

@hangaoke1 feel free to send a PR and improve our docs