"name" in @Component options is obfuscated (?) in build version

Repro: https://github.com/sp00x/vue-typescript-name-bug

2 components, Foo (ts) and Bar (js) registered as global components in main.ts using

import Foo from '@/components/Foo.vue';
import Bar from '@/components/Bar.vue';
Vue.component(Foo.name, Foo) // typescript
Vue.component(Bar.name, Bar) // javascript

With yarn serve it logs in the console:

in App.vue:

Foo.name = Foo
Bar.name = Bar

in main.ts

Foo.name = Foo
Bar.name = Bar

and renders

Foo:
foo
- Bar:
bar

With yarn build output it logs in the console:

in App.vue:

Foo.name = t
Bar.name = Bar

in main.ts

Foo.name = t
Bar.name = Bar

renders:

Foo: - Bar:
bar

Foo is a typescript SFC, where as Bar is a regular javascript SFC with export default { name: 'Bar' }

Seems like the typescript value is being obfuscated or uglified somehow?

[simllll]

This is actually a side effect of terser webpack plugin. If you disable terser’s mangling, things work fine. I added the following in my nuxt config in build.extend() function:

if (isServer) {
  // replace terser on server side with "mangle: false"
  config.optimization.minimizer = config.optimization.minimizer.map(o => {
	if (o.constructor.name === 'TerserPlugin') {
		return new TerserPlugin({
			cache: true,
			parallel: true,
			sourceMap: true, // Must be set to true if using source-maps in production
			terserOptions: {
				mangle: false
			}
		});
	}
	return o;
  });
}

[Trinovantes]

This worked for me in webpack4 without increasing the bundle size too much

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    keep_classnames: true,
                },
            }),
        ],
    },
}