Optimize bundle size by minify/uglify private field

[cesco69]

Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

Actually Angular after build preverve the name of private field, eg. this service:

class MyService extends BaseService  {
    constructor(
        private translationService: TranslationService, 
        private authService: AuthService) {
        super()
    }

    getActiveLang() {
        return this.translationService.getActiveLang()
    }

    getUserMail() {
        const user = this.authService.currentUser();
        return user  ? user .email : null
    }          
}

After build become, eg.:

class u extends w.PV {
    constructor(_, t) {
        super(),
        this.translationService = _,
        this.authService = t
    }
    getActiveLang() {
        return this.translationService.getActiveLang()
    }
    getUserMail() {
        const _ = this.authService.currentUser();
        return _ ? _.email : null
    }          
}

Private properties translationService, authService aren't minify/uglify, the expected output is eg.:

class u extends w.PV {
    constructor(_, t) {
        super(),
        this._ = _,
        this.t = t
    }
    getActiveLang() {
        return this.t.getActiveLang()
    }
    getUserMail() {
        const _ = this._.currentUser();
        return _ ? _.email : null
    }          
}

This happen because instance properties can leak into basically anywhere, where the minifier is not guaranteed to have applied a consistent minification, eg.:

window.svc = new MyService();

and then some global script uses window.svc.translationService to be available. The private marker does not prevent this; it is a TypeScript only keyword that minifiers don't see.

Some optimizers are capable of this minification, like Closure Compiler using Advanced optimizations, but you have to follow its strict rules to make everything work that way. Angular does not integrate/support Closure Compiler though.

All class members declared as protected/private can be uglified. However, since the uglification made by Terser works on .js file there can be no distinction between public and protected/private members.

Proposed solution

My suggestion is to prefix after Typescript/Angular-cli build the protected/private members with an underscore or something alike, eg.:

class u extends w.PV {
    constructor(_, t) {
        super(),
        this._translationService = _,
        this._authService = t
    }
    getActiveLang() {
        return this._translationService.getActiveLang()
    }
    getUserMail() {
        const _ = this._authService.currentUser();
        return _ ? _.email : null
    }          
}

and pass an option to terser telling it to uglify only members which start with underscore.

Alternatives considered

writing small name for private field

[JoostK]

My suggestion is to prefix after Typescript/Angular-cli build the protected/private members with an underscore or something alike

Even then such optimisations are error-prone and can easily break things. If it's not within your code then any library code may break, so this would not really be a safe optimisation to make. As I said before (and you quoted above) there are strict rules associated when such optimizations are applied, and it's very easy to get these rules wrong and consequently break the app in unexpected ways.

[cesco69]

ok, but couldn't you add an option inside angular.json to let the user choose?

[alan-agius4]

As @JoostK mentioned renaming fields even private is not safe.

See #15257 and #12028

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}