Class name change when the file is minified

[ftgibran]

Version

3.0.0-beta.6

Reproduction link

https://codesandbox.io/s/vnq0v2w8z3

Steps to reproduce

Create any class and print its name by using constructor.name then reproduce it in production mode.

What is expected?

Prints the correct class name.

What is actually happening?

It prints a letter instead of the class name.

---

Probably it happens because of the file is minified in production mode.

[dhensche]

UglifyJS plugin is used to perform minification during production builds via the uglifyjs-webpack-plugin. You can override/modify the settings using the vue.config.js as specified in the docs. I would refer to the UglifyJS Mangle Options to see how you might prevent mangling properties in specific scenarios. You can pass UglifyJS options into the webpack plugin via the uglifyOptions parameter

[ftgibran]

I did it and worked perfectly. Thank you @dhensche ! Unfortunately, the file size has increased from 880.89 kb to 1291.50 kb.

chainWebpack: config => {
    config
        .plugin('uglify')
        .tap(args => {
          args[0].uglifyOptions.mangle = false
          return args
     })
},

[jacobg]

@ftgibran If you're just concerned with class names, and want to minimize file size, can you just set the option keep_classnames: true?

[alexey2baranov]

hello!
This code doesn.t work any more. And link to vue.js docs is incorrect. Can you provide actual way

Building for production... ERROR TypeError: Cannot read property 'uglifyOptions' of undefined
TypeError: Cannot read property 'uglifyOptions' of undefined
at /home/alexey/WebstormProjects/kopnik-client/vue.config.js:23:25
at Object.tap (/home/alexey/WebstormProjects/kopnik-client/node_modules/webpack-chain/src/Plugin.js:25:24)
at chainWebpack (/home/alexey/WebstormProjects/kopnik-client/vue.config.js:22:14)
at /home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/lib/Service.js:241:40
at Array.forEach ()
at Service.resolveChainableWebpackConfig (/home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/lib/Service.js:241:26)
at PluginAPI.resolveChainableWebpackConfig (/home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/lib/PluginAPI.js:146:25)
at module.exports (/home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/lib/commands/build/resolveAppConfig.js:2:22)
at build (/home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/lib/commands/build/index.js:146:50)
at /home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/lib/commands/build/index.js:88:13
at Service.run (/home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/lib/Service.js:235:12)
at Object. (/home/alexey/WebstormProjects/kopnik-client/node_modules/@vue/cli-service/bin/vue-cli-service.js:37:9)
at Module._compile (internal/modules/cjs/loader.js:1121:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:10)
at Module.load (internal/modules/cjs/loader.js:976:32)
at Function.Module._load (internal/modules/cjs/loader.js:884:14)

I did it and worked perfectly. Thank you @dhensche ! Unfortunately, the file size has increased from 880.89 kb to 1291.50 kb.

chainWebpack: config => {
    config
        .plugin('uglify')
        .tap(args => {
          args[0].uglifyOptions.mangle = false
          return args
     })
},

[djpate]

if anyone is still looking for this.

module.exports = {
  chainWebpack: config => {
    config.optimization
          .minimizer('terser')
          .tap(args => {
            const { terserOptions } = args[0]
            terserOptions.keep_classnames = true
            terserOptions.keep_fnames = true
            return args
          })
  }
}

[Samuel29]

Thanks for that hing @djpate this made my day after 2 hours debugging an issue that only happened in production build, not in dev mode...
if I may add a modest contribution here:
if you only need to keep some of your class names, you can use regex , cf Terser minify options

module.exports = {
  chainWebpack: config => {
    config.optimization
          .minimizer('terser')
          .tap(args => {
            const { terserOptions } = args[0]
            terserOptions.keep_classnames = /.*ClassNameThatIWantToKeep.*/
            terserOptions.keep_fnames = /.*ClassNameThatIWantToKeep.*/
            return args
          })
  }
}```