Ionic-app-scripts: Feature: remove console.log statements from prod builds automatically

[ghenry22]

Short description of the problem:

Console.log statements that are useful in development are pointless in a production app, the default configuration for ionic prod builds could strip console.log statements using uglifyjs to produce a more optimised build with just a simple config change.

What behavior are you expecting?

when running a dev build console.log statements left in place for debugging.
when running a prod build console.log statements stripped for better performance.

Steps to reproduce:

1. replace the current uglifyjs.config.js compress statement with the statement below.
2. after the change prod builds will strip console.log statements from your code as part of the build creating a more optimised production build.

  compress: { drop_console: true },

Which @ionic/app-scripts version are you using?
v1.0.0

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
I've been running with this config in place for months and it has worked without a single issue.

[vazad28]

I too think this is very good idea

[danbucholtz]

Good idea. We'll have to think about how to best implement this for prod builds since I'm not sure Babili and Closure support this. We do this in the framework itself already with console.debug statements.

We'll do it, but it'll take a bit of time.

Thanks,
Dan

[ghenry22]

@danbucholtz maybe something like this https://babeljs.io/docs/plugins/transform-remove-console/ if moving to Babel toolstack.

Anyway for anyone that is interested with the current toolstack the simple change above in the uglifyjs config will strip console.log statements from your production builds right now. Just need to find the config folder under node_modules for ionic app scripts and edit.

[ciesielskico]

Just introduce environment variables in your project and do this:

if(env === 'prod') {
   console.log = () => {}
}

This overrides the console.log with a noop (empty) function. Voila - no console output in your prod build.

[danbucholtz]

@ciesielskico,

Definitely is a good short term fix for devs. We would want to save the bytes though and would purge it from the code I think.

Thanks,
Dan

[ghenry22]

@ciesielskico but changing one config variable for uglifyjs completely strips the statements from the code for prod builds only already, just have to remember that unless it is enabled by default as part of app-scripts it will get over written on update of ionic.

[danbucholtz]

@ghenry22,

You can provide your own uglify config or really any of the tools.

https://github.com/driftyco/ionic-app-scripts#custom-configuration

Thanks,
Dan

[ghenry22]

I know you can but from what I understand that config them completely overwrites the defualt ionic config, so if something in the default config changes elsewhere and I don't realise I am then stuck with a potentially bad config, I just find it easier to troubleshoot if something changes doing it the other way round, even if it means manually updating a value for each release of app scripts.

[danbucholtz]

No, it doesn't. If you add in one field, it will merge or Object.assign the configs to apply the custom config fields over top of the original.

Thanks,
Dan

[ghenry22]

oh awesome I shall give it a try! Thanks!

[moldstadt]

Thanks Dan, this works for me.
Added following to package.json:

    "config": {
        "ionic_uglifyjs": "./config/uglifyjs.config.js"
    },

and created uglifyjs.config.js in config folder, with the following content:

module.exports = {
    compress: { drop_console: true }
};

[NoNameProvided]

This should be opt-in, we do use console.log in our production apps, simply redirect them via overriding the original console.log function. This way, we can attach debug information to bug reports and yet prevent the performance hit of using console.log in prod.

[danbucholtz]

It will most certainly be configurable whether it runs or not.

Thanks,
Dan

[ghenry22]

@moldstadt post above documents exactly how to apply this and it has been working for me for ages now. Since it doesn't seem like it will make it in as a default option for app-scripts I will close this issue.