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
-
Install
npm i -D angular-builder-custom-terser-options
-
Add builders from this package to your
angular.json
.- Set
projects.yourProjectName.architect.build
toangular-builder-custom-terser-options:browser-custom-terser
- Set
projects.yourProjectName.architect.build.configurations.production.optimization
totrue
- 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. - Set
projects.yourProjectName.architect.serve
toangular-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 } } } } }
- Set
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 }
.