为何ng build --prod未混淆类私有属性？Angular包体积优化问询

Great question—this is such a common frustration for Angular devs trying to balance clean, encapsulated code with lean production bundles. Let’s break down your two core concerns and walk through practical solutions.

Why Private Properties Stay Unobfuscated by Default #

When you run ng build --prod, Angular relies on Terser for minification and obfuscation. The reason private properties (even internal ones not used outside the component) aren’t renamed boils down to two key factors:

• Angular’s AOT Safety Checks: The AOT compiler generates component factory code that directly references any properties used in your templates. By default, Terser is configured to preserve these property names (via keep_classnames or keep_fnames in its config) to avoid breaking template bindings. Angular’s build pipeline flags these properties as "used," so Terser leaves them untouched to prevent runtime errors.
• TypeScript’s private is Compile-Time Only: TypeScript’s private modifier is just a compile-time guard—it doesn’t make properties truly private at runtime. Transpiled JS turns them into regular object properties, so Terser treats them as public by default unless explicitly told otherwise.

The Template Property Encapsulation Headache #

You’re absolutely right that forcing template-bound properties to be public breaks OOP encapsulation and adds unnecessary bulk to bundles. The good news is this got easier in Angular 14+:

• Prior to Angular 14, AOT would throw errors if you tried to use private properties in templates. Now, you can safely mark template-only properties as private while keeping AOT enabled. This lets you keep internal state encapsulated without exposing it as a public API.
• Note: ES private fields (using the # syntax) still aren’t supported in Angular templates (as of 2024), so stick with TypeScript’s private modifier for template-bound internal properties.

How to Obfuscate Private Properties & Shrink Your Bundle #

If you want to obfuscate unused private properties and even safely rename template-bound ones, here’s how to tweak your build setup:

1. Customize Terser Settings in angular.json:
   Open your angular.json and adjust the production build’s optimization config to override Terser’s default behavior. You can disable the keep_classnames rule, and optionally target only properties with a prefix (like _) to avoid breaking public APIs:

   "configurations": {
     "production": {
       "optimization": {
         "scripts": {
           "terserOptions": {
             "keep_classnames": false,
             "keep_fnames": false,
             "mangle": {
               "properties": {
                 "regex": "^_" // Mangle only properties starting with _ (your internal/private convention)
               }
             }
           }
         }
       }
     }
   }
   

   Using a consistent prefix for internal properties helps Terser distinguish them from public APIs, reducing the risk of accidental breakage.

2. Mark Public APIs Explicitly:
   Use @Input() and @Output() for properties that are meant to be used outside the component. This signals to both TypeScript and Angular’s build tools which properties are public and shouldn’t be obfuscated, while letting you keep internal template properties as private.

3. Double Down on Tree Shaking:
   Combine this with Angular’s built-in tree shaking: use providedIn: 'root' for services, avoid unused imports, and keep components lean. This eliminates dead code automatically, complementing property obfuscation to shrink your bundle even more.

Wrap-Up #

The default behavior is a safety net to prevent broken templates, but you have full control to adjust things. Angular 14+’s support for private properties in templates removes the need to expose internal state, and tweaking Terser’s config lets you obfuscate private properties without sacrificing functionality. It’s all about finding the sweet spot between encapsulation and optimization.

内容的提问来源于stack exchange，提问作者Javier Marín