Google Speed Insights (and other tools) warns about your JS code is not minified

[rafa-suagu]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.14 (We don't have tested with version 10 yet)

Description

Before Angular 9 upgrade never we have seen this warning about JS minification using Angular CLI, but since we update our projects this warning appears. Advise us that main-es2015 file is not minified.

No compilation errors or warnings, the files seem minified and uglified but this warning is still shown. We have not made any changes to the build parameters for production when we have made the migration to Angular 9 and never we have seen this "error" with production builds and we have our website developed with Angular since Angular 2.

The following code is our production tsconfig files and angular.json

angular.json - build section

{
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/apps/client/browser",
      "index": "apps/client/src/index-dev.html",
      "main": "apps/client/src/main.ts",
      "polyfills": "apps/client/src/polyfills.ts",
      "tsConfig": "apps/client/tsconfig.app.json",
      "aot": true,
      "assets": [
        "apps/client/src/assets",
        {
          "glob": "**/*",
          "input": "../../node_modules/@cnv/ui/components/form/input-phone/src/assets/flags",
          "output": "assets/flags"
        },
        {
          "glob": "**/*",
          "input": "../../node_modules/@cnv/ui/components/form/dropdown/src/assets/icons",
          "output": "assets/icons"
        }
      ],
      "styles": [
        "../../node_modules/normalize.css/normalize.css",
        "apps/client/src/styles.scss"
      ],
      "scripts": [],
      "stylePreprocessorOptions": {
        "includePaths": [
          "apps/client/src/styles"
        ]
      }
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "apps/client/src/environments/environment.ts",
            "with": "apps/client/src/environments/environment.prod.ts"
          },
          {
            "replace": "apps/client/src/build-specifics/index.ts",
            "with": "apps/client/src/build-specifics/index.prod.ts"
          }
        ],
        "index": "apps/client/src/index.html",
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb",
            "maximumError": "10kb"
          }
        ],
        "tsConfig": "apps/client/tsconfig.app.prod.json"
      },
      "hmr": {
        "budgets": [
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb"
          }
        ],
        "fileReplacements": [
          {
            "replace": "apps/client/src/environments/environment.ts",
            "with": "apps/client/src/environments/environment.hmr.ts"
          }
        ],
        "vendorSourceMap": true
      },
      "es5": {
        "budgets": [
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb"
          }
        ],
        "tsConfig": "apps/client/tsconfig-es5.app.json"
      },
      "es5-production": {
        "budgets": [
          {
            "type": "anyComponentStyle",
            "maximumWarning": "6kb"
          }
        ],
        "tsConfig": "apps/client/tsconfig-es5.app.prod.json"
      }
    }
  }
}

workspace tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

base tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./"
  },
  "include": [
    "src/**/*.ts"
  ]
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc/apps/client",
    "types": [
      "node"
    ],
    "paths": {
      "@app/*": [
        "src/app/*"
      ],
      "@common/*": [
        "src/app/common/*"
      ],
      "@core/*": [
        "src/app/core/*"
      ],
      "@env/*": [
        "src/environments/*"
      ],
      "@build-specifics": [
        "src/build-specifics"
      ],
      "@cnv/*": [
        "../../libs/*/src/index.ts"
      ]
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.app.prod.json

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "paths": {
      "@app/*": [
        "src/app/*"
      ],
      "@common/*": [
        "src/app/common/*"
      ],
      "@core/*": [
        "src/app/core/*"
      ],
      "@env/*": [
        "src/environments/*"
      ],
      "@build-specifics": [
        "src/build-specifics"
      ]
    }
  }
}

🔬 Minimal Reproduction

We are not sure how to reproduce it because we don't perform any action except the Angular 9 update.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.7
Node: 12.17.0
OS: darwin x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.7
@angular-devkit/build-angular      0.901.7
@angular-devkit/build-ng-packagr   0.901.7
@angular-devkit/build-optimizer    0.901.7
@angular-devkit/build-webpack      0.901.7
@angular-devkit/core               9.1.7
@angular-devkit/schematics         9.1.7
@angular/cdk                       9.2.4
@angular/cli                       9.1.7
@ngtools/webpack                   9.1.7
@nguniversal/builders              9.1.1
@nguniversal/common                9.1.1
@nguniversal/express-engine        9.1.1
@schematics/angular                9.1.7
@schematics/update                 0.901.7
ng-packagr                         9.1.5
rxjs                               6.5.5
typescript                         3.8.3
webpack                            4.42.0

Anything else relevant?

We use several third party libraries like ngrx but we also used them before the migration.

Some background about this issue can be found here #17550

You can check it at carnovo.com or SpeedInisghts

We can't give you more information about this bug but If you need some more specific information we are available for it.

[tspicer]

@rafa-as I have seen the same issue at Pagespeed and https://gtmetrix.com/.
GT Metrix will even generate the minified version to highlight the fact no minification is occurring.

[wibimaster]

Got it too, with a fresh install of default project with angular-cli

edit
Additionaly, compressed code downloaded from GTMetrix isn't valid (for my case), it ends with
this.peekStartsWith("/")&&!this.peekStartsWith("

[tspicer]

@wibimaster i did not use gtmetrix other than a cross-check to see if the code was minimized (vs being valid). Running the JS through a manual process highlights minification is not properly occurring.

[dgp1130]

@clydin did some investigation here and it seems that even an ng new project running either Ivy or View Engine will trigger this notice. We'll reach out to Page Speed Insights to understand a bit more about how this check is computed and see what we can do to get more actionable analysis.

[tspicer]

@dgp1130 thank you. PageSpeed is embedded into Google Search Console, Google Ads, Google Analytics...so it is widely used as a benchmark of performance. I get warnings in GSC and Ads about similar PageSpeed alerts which means my SEO can take a hit or ads will not show. The good news? Solving it once will solve it everywhere. :)

[blasco]

Same here, using angular 10 and getting minification required warnings in lighthouse...

[blasco]

Seems that if I run the minification manually with terser and add the --mangle-props then lighthouse doesn't complaint, but this sames to break the code as the app stops working...

[oky1]

Same problem. Any progress here?

[geetika-kathuria]

Team, any update on this issue?

[cbernth]

Same problem for me, looking forward to guidance.

[djouf007]

I have the same problem