angular-builder-custom-terser-options v1.0.1

angular-builder-custom-terser-options

Custom Angular builder that allows Terser (Uglify) customization. It's a sub-class of Angular's default builder and it does a very small customization of its logic by extending final webpack config with your custom options for Terser.

• Quick start
• Common use-cases
  • Keep class names

Quick start

1. Install

   npm i -D angular-builder-custom-terser-options

   For a builder compatible with Angular 7 run npm i -D angular-builder-custom-terser-options@1

2. Add builders from this package to your angular.json.

   1. Set projects.yourProjectName.architect.build to angular-builder-custom-terser-options:browser-custom-terser
   2. Set projects.yourProjectName.architect.build.configurations.production.optimization to true
   3. Set projects.yourProjectName.architect.build.configurations.production.terserOptions to an object with any minify options supported by Terser. You can find the list of available options here.
   4. Set projects.yourProjectName.architect.serve to angular-builder-custom-terser-options:dev-server-custom-terser

   {
     // ... rest of the default config ,
     "projects": {
       "yourProjectName": {
         "architect": {
           "build": {
             // Set our custom builder here
             "builder": "angular-builder-custom-terser-options:browser-custom-terser",
             "options": {
               // Your default options. Leave it as is
             },
             "configurations": {
               "production": {
                 // Add any options supported by Terser here
                 "terserOptions": {
                   "keep_classnames": true
                 },
                 // Enable optimization to enable Terser itself
                 "optimization": true
               }
             }
           },
           "serve": {
             // Set our custom builder here
             "builder": "angular-builder-custom-terser-options:dev-server-custom-terser"
             // Rest of the config. Leave it as is
           }
         }
       }
     }
   }

Common use-cases

Keep class names

If you set target in your tsconfig.json to es6 or higher, set your terserOptions to { "keep_classnames": true }. If you set target in your tsconfig.json to es5, set your terserOptions to { "keep_fnames": true }.