Angular 17 esbuild: Code Masked but Not Minified in Production/Sandbox

I recently migrated my Angular 17 project from Webpack to esbuild as the build tool. Since this change, I've encountered an issue with my production and sandbox builds. While the code appears masked (obfuscated/renamed), it doesn't seem to be properly minified. In development with sourceMap: true, I can see the original code, but I understand this is not a solution for production.

My goal is to have truly minified code in production and sandbox environments. The current "masked" code, while slightly harder to read, is still far from the optimized, minified code I expect.

Here's a snippet of my angular.json configuration:

{
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.json",
"assets": [
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": // Empty scripts array
},
"configurations": {
"development": {
"sourceMap": true,
"optimization": false,
"namedChunks": true,
"vendorChunk": true,
"buildOptimizer": false
},
"production": {
"buildOptimizer": true,
"optimization": {
"scripts": true,
"styles": {
"minify": true
}
},
"sourceMap": false
},
"sandbox": {
"buildOptimizer": true,
"optimization": {
"scripts": true,
"styles": {
"minify": true
}
},
"sourceMap": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project:build",
"proxyConfig": "src/proxy.conf.js"
},
"configurations": {
"development": {
"browserTarget": "project:build:development"
}
}
}
}
}


How can I ensure that my JavaScript code is properly minified when using esbuild in my Angular 17 production and sandbox builds? The current "masking" is not sufficient. I need the code to be truly minified for optimal performance and to reduce the risk

Continue reading...