[Meta] Known issues for the minifier

[kdy1]

Rules to port from google closure compiler

defaults

We have to enable

• reduce_funcs
• reduce_vars

by default

---

Rules to implement

Promise.resolve

If it's immediately resolved, we can drop some nodes.

[Austaras]

benchmark

[kdy1]

While looking at the benchmark, I found that

I found that

• swc minifier uses all cpu core, but benchmark is invoked on 2 core machine

  • But I think actual minification is done on CI, so maybe parallel optimization is not a correct way?
  • I found this because I couldn’t reproduce the numbers on the chart. The minifier was way faster on my machine due to the parallelism.

• Parallelization strategy of the optimizer is optimized for the webpack bundles.

  • This result in some perf bug for some inputs. I'll fix it

[Austaras]

Seems like swc is exponentially slower than esbuild when input size increases.

[kdy1]

I think the analyzer is the problem.
Due to the restriction of rust, swc minifier does not track changes and instead performs full analysis before invoking the optimizer.

But there are much more rules than esbuild, which does not use visitors.

[Austaras]

Misalignment between terser and swc default options

computed_props
conditionals
dead_code
directives
reduce_funcs
reduce_vars
switches

However simply enable them would likely to cause lots of bugs.

[Austaras]

As google closure compiler ranks #1 in compress react, I diffed the output artifact with swc and found some abilities even terser doesn't have:

1. gcc could remove common statement inside if -> switch -> catch, so following

function getComponentName(type) {
  if (typeof type === 'object') {
    switch (type.$$typeof) {
      case REACT_BLOCK_TYPE:
        return getComponentName(type._render);

      case REACT_LAZY_TYPE:
        {
          try {
            return getComponentName(init(payload));
          } catch (x) {
            return null;
          }
        }
    }
  }

  return null;
}

can be transformed into

function getComponentName(type) {
  if (typeof type === 'object') {
    switch (type.$$typeof) {
      case REACT_BLOCK_TYPE:
        return getComponentName(type._render);

      case REACT_LAZY_TYPE:
        {
          try {
            return getComponentName(init(payload));
          } catch (x) {
          }
        }
    }
  }

  return null;
}

2. reduce var declaration if a previous var is only used in its intialization

function getWrappedName(outerType, innerType, wrapperName) {
  var functionName = innerType.displayName || innerType.name || '';
  return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
}

compressed into

function getWrappedName(c, a, b) {
  a = a.displayName || a.name || "";
  return c.displayName || ("" !== a ? b + "(" + a + ")" : b);
}

3. would inline functions called multiple times if it's simple enough

function describeFunctionComponentFrame(fn, source, ownerFn) {
    {
      return describeNativeComponentFrame(fn, false);
    }
  }

would be inlined