Webpack-encore: Document how javascript is being minified in production

[trsteel88]

I can't find how javascript is being minified in production or what additional options we can give it (e.g. stripping special comments).

[deckchairlabs]

Looks like it is still a TODO. https://github.com/symfony/webpack-encore/blob/master/lib/config-generator.js#L390

[weaverryan]

Indeed - we need a way to directly set the uglify options. What about:

Encore
    .setUglifyJsOptions({...})

The options are here: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/blob/master/README.md. I can't think of any reason why it would need to be any more complex than this :)

[stof]

If we expose the options, we should decide how this interacts with the default options provided by Encore (and we should document them so that people can know what to expect)

[weaverryan]

@stof In this case, I was thinking it would be an array merge, where (obviously) the user's config takes precedence on conflicts. But, I did something a bit different for the babel config. In that case, since the default babel config has a deeper structure (and maybe you want to just tweak on embedded key), it's configured with a callback, where we pass you the default config and you modify it. We could stay consistent and use that approach everywhere.

[fabpot]

I would avoid merging configurations if this is not just key => value pairs. Not sure if that's the case here though :)

[weaverryan]

The options (that we add) are a simple, scalar key-pair values now... but that may not be true forever :).

Let's go with the callback way of doing it:

Encore
    .configureUglifyJsPlugin(function(options) {
        // options already has our default values
    });

[elmariachi111]

I tried to strip out license comments and minfify the results further in production by doing this (encore 0.12 / webpack 3.5):

Encore.configureBabel(function(babelConfig) { //this is actually documented.
    babelConfig.comments = false;
    return babelConfig;
})

but it doesn't strip the comments (tried a little bit but I cannot make it work :( ).

So in a 2nd attempt I tried using the webpack.UglifyJS plugin:

if (Encore.isProduction()) {
    Encore.addPlugin(new webpack.optimize.UglifyJsPlugin({
        comments: false,
        compress: {
            warnings: false,
            drop_console: true,
        }
    }))
}

but that breaks some (vendor) scripts on my page (parsley.js in my case :( ). I guess the most advanced way of achieving a real minification is using babili (https://webpack.js.org/plugins/babili-webpack-plugin/) that does minify >es5 code first but I didn't try that one yet.

[weaverryan]

A quick search makes it look like comments: false is the default for UglifyJsPlugin. Exactly what comments are you seeing in the final, compiled code? There was a recent fix - see #132 - for extra comments in production. I need to create a release so people can get that. I'll see if I can do that right now :)

[weaverryan]

0.13.0 is out with that fix! I'm curious if that makes a difference for you @elmariachi111 or if you're seeing comments for some other reason.

[elmariachi111]

Well that certainly looks much better now. Now only the license plates (starting with /*!) are left. That's fine for me as it seems to be Babel/Webpack's default behaviour but of course it would be nicer if the text extractor (forgot the real name) would put these into another LICENSES file.

[weaverryan]

Indeed - it looks like those comments are kept on purpose: https://github.com/webpack/webpack/issues/324#issuecomment-157855568

And it looks like you can opt to remove them via the extractComments option: https://github.com/webpack-contrib/uglifyjs-webpack-plugin#user-content-options... which can easily be set once we actually make the options to Uglify configurable (which is just a chore we need to take care of)

[elmariachi111]

Yeah. As said above: when I added the uglifyjs plugin to the pipeline some parts of my frontend code broke -> that might be some problem on my side but I guess it mangles some symbols from the common chunk so that the page-specific script couldn't access it anymore. Just sayin :)

[mifan-twan]

i got error in terser with message "minify" undefined when build into production

[Kocal]

Please open a new issue.

[Lyrkan]

@mifan-twan That's caused by an issue with the latest version of Terser that was released yesterday (see https://github.com/webpack-contrib/terser-webpack-plugin/issues/66).

It's breaking a lot of builds and a PR that should fix it has already been created (https://github.com/terser-js/terser/pull/254). Not much we can't do on our side but wait for a new version.

In the meantime there are some workarounds available in the issue I linked.

[mifan-twan]

@Lyrkan thanks you for the information, I spent a day looking for causes. and I still haven't produced anything.