https://github.com/aigoncharov/angular-builder-custom-terser-options

Angular builder that allows Terser (Uglify) customization
https://github.com/aigoncharov/angular-builder-custom-terser-options

angular builder terser uglify

Last synced: about 2 months ago
JSON representation

Angular builder that allows Terser (Uglify) customization

• Host: GitHub
• URL: https://github.com/aigoncharov/angular-builder-custom-terser-options
• Owner: aigoncharov
• License: mit
• Created: 2019-02-20T12:00:43.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T03:14:41.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T02:53:43.433Z (2 months ago)
• Topics: angular, builder, terser, uglify
• Language: TypeScript
• Size: 1.44 MB
• Stars: 21
• Watchers: 3
• Forks: 7
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

**This project is not maintained. Try https://github.com/just-jeb/angular-builders instead**

- [Quick start](#quick-start)

- [Common use-cases](#common-use-cases)

  - [Keep class names](#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`

1. Add builders from this package to your `angular.json`.

   1. Set `projects.yourProjectName.architect.build` to `angular-builder-custom-terser-options:browser-custom-terser`

   1. Set `projects.yourProjectName.architect.build.configurations.production.optimization` to `true`

   1. 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](https://github.com/terser-js/terser#minify-options).

   1. Set `projects.yourProjectName.architect.serve` to `angular-builder-custom-terser-options:dev-server-custom-terser`

   ```js

   {

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