/angular-builder-custom-terser-options

Angular builder that allows Terser (Uglify) customization

Primary LanguageTypeScriptMIT LicenseMIT

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.

PLEASE UPVOTE THIS ISSUE TO BRING TERSER (UGLIFY) CUSTOMIZATION INTO ANGULAR'S DEFAULT BUILDER!!!

Quick start

  1. Install

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

  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 }.