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

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 20
Comments: 31 (3 by maintainers)

Most upvoted comments

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

dgp1130 on Jul 9, 2020

I have the same issue.

akisvolanis on Aug 9, 2020

Any update? Hack? it shows about 70% reduction in the main.js file if minified so it’s a huge chunk and considering with every new version of Angular says reduced bundle size I won’t expect this.

ishan123456789 on Aug 10, 2020

yes, the same issue for me as well. we have set the “optimization”: true. But in lighhouse the warning comes that “Remove unused javascripts”. Can you please help in this as early as possible.

@e20bhn It’s not the same thing ; this issue is mainly about code minification, and not code used/not used

wibimaster on Aug 4, 2020

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

blasco on Jul 18, 2020

@ishan123456789, while compression will certainly reduce the size, the error in this issue is specific to minification. Most servers or CDNs should be configured to use compression. For example, we use CloudFront to serve everything, which will gzip compress the assets, including JS.

tspicer on Aug 20, 2020

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…

blasco on Jul 19, 2020

@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. 😃

tspicer on Jul 9, 2020

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("

wibimaster on Jul 3, 2020

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

tspicer on Jul 3, 2020