Vue-cli: Add extractComments option to be used on uglifyOptions.js

[peluprvi]

What problem does this feature solve?

A developer should have an option to extract coments into a new file when minifying js files.
In some cases this option can generate less kb.

Today it can be done by using configureWebpack:

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.extractComments = true
      config.optimization.minimizer[0].options.uglifyOptions.output.comments = false
    }
  }
}

What does the proposed API look like?

The new option can be named productionExtractComments and it will work like productionSourceMap option.

When options.productionExtractComments is true, uglifyOptions.js should receive extractComments: true and uglifyOptions.output.comments: false (it doesn't removes all the extracted comment if equals /^\**!|@preserve|@license|@cc_on/).

If options.productionExtractComments is false, uglifyOptions.js should be default (extractComments: true and uglifyOptions.output.comments: /^\**!|@preserve|@license|@cc_on/).

It must be included in https://cli.vuejs.org/config/#vue-config-js

In the future, productionSourceMap and productionExtractComments can be renamed and realocated inside a js or other options, like the css one.

[LinusBorg]

Since this is literally done in 3 lines of code and, at waker in my experience, not a widely used feature (this isn't he first time I even hears about it), I don't think this will get its own config option.

The goal the config extensibility and plugin system are to enable users to make small changes like this themselves and extract bigger ones into their own plugin.

[peluprvi]

Agreed, since it does little difference.

I posted that here because I saw many devs asking about it on Vue Land and they don't got the answer.
I also don't know if config.optimization.minimizer[0].options is the best way to do that or if the configureWebpack is the best place. By your comment I can assume it is not wrong, but it could be easier (it take me some hours to figure out).

Since it is a faq and not following the common plugin settings way, it could/should/must be included into docs, as I said in a general way, like "you can edit uglify or js minification settings by...".

You can consider this issue as a suggestion that can save people time.

[JessicaSachs]

So is there a way to tweak the minification options yet?

[LinusBorg]

OP already provided one right in his issue.

We won't add anything special for this.

[JessicaSachs]

His solution doesn't actually work. Maybe it did < Webpack 4? Regardless, inside of chainWebpack, minimizer is a function, so I can't really get at the minimizer options.

The only way I was able to extract comments or adjust any license-related comment stuff is to replace the entirety of the minimizer with a Terser plugin.

This is undesirable because I generally want to leave the Vue-cli webpack configuration alone. I just want to tweak an option here or there.

[JessicaSachs]

I think what I'm looking for is: Is there a better way to pass options into the uglify/minify settings without having to replace it wholesale? I just feel like it's totally overkill.

[LinusBorg]

The OP used configureWebpack.

In chainWebpack it's a function, true. All webpack-chain interfaces are functions.

See here:

https://github.com/neutrinojs/webpack-chain/blob/master/README.md#config-optimization-minimizers-modify-arguments

If you need help in actually using chainWebpack, please open a topic on forum.vuejs.org

[JessicaSachs]

Ah, jeeze, I misread. Thank you so much! Cheers.