About keep classname in minified file

[woshiguabi]

Problem

class Foo {}

By default, it compiles to

"use strict";

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  Object.defineProperty(Constructor, "prototype", { writable: false });
  return Constructor;
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Foo = /*#__PURE__*/ _createClass(function Foo() {
  _classCallCheck(this, Foo);
});

But after terser minified, the class name will be lost.

Sometimes we want to keep the class name for hints. Such as react and vue-class-component.

@Component
export default class Foo extends Vue {}

After compile and minified, in vue devtools will lost the name.(same in react devtools)

And if the minified name conflicts with html built-in tag name, such as <a> <b> <i>, will get a console error in Vue

Do not use built-in or reserved HTML elements as component id

I try to use terser options, but still have some problems:

• keep_classnames won't work because after compile there are no classes, just function.
• keep_fnames will keep all function name, includes the normal function.

So this problem can only be solved in babel.

Suggestion

Add a assumption setClassName to pass original class name to _createClass.

var Foo = /*#__PURE__*/ _createClass('Foo', function Foo() {
  _classCallCheck(this, Foo);
});

And in _createClass define a property to class

Object.defineProperty(Constructor, "name", { value: name, writable: false });

We can do some compatibility work to keep performance when setClassName not be enabled.

[JLHwung]

Thanks for the suggestion. The compiler assumption is meant to output less code, not more. So we won't consider the proposed assumption, especially Babel already outputs code that preserve class names.

If you want to debug your app, you can disable terser and generate a debug build. Even with source map support, the debugger experience from the minified code is still limited compared to unminified debug build.

[woshiguabi]

Thanks!
What I want to know is not just how to debug, but how to keep the class name from being terser compressed while the class is compiled into a function.I will still try to find the answer.

[woshiguabi]

Thanks! What I want to know is not just how to debug, but how to keep the class name from being terser compressed while the class is compiled into a function.I will still try to find the answer.

A common use case, detect the class name in compiled code.

[nicolo-ribaudo]

You could also inject that Object.definePropertycall using a custom plugin.