search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.97k forks source link

production build is still extremely slow #17885

Closed mix5003 closed 4 years ago

mix5003 commented 4 years ago

🐞 Bug report

Description

"ng build --prod" is slow. my project build time in bitbucket pipeline or google cloud build may take up to 17 minutes for one build.

🔬 Minimal Reproduction

i can not re-produce it. i not sure it relate to project size or may be project sturcture. if you want i can share my project in privately.

🔥 Exception or Error

no error. but it too slow


 [webpack.Progress] 89143ms building
 [webpack.Progress] 389ms finish module graph
 [webpack.Progress] 263ms dependencies optimization
 [webpack.Progress] 83ms chunk graph
 [webpack.Progress] 503ms module optimization
 [webpack.Progress] 70ms advanced chunk optimization
 [webpack.Progress] 181959ms chunk modules optimization
 [webpack.Progress] 34ms module order optimization
 [webpack.Progress] 40ms before module ids
 [webpack.Progress] 24ms module id optimization
 [webpack.Progress] 20ms after chunk id optimization
 [webpack.Progress] 10519ms hashing
 [webpack.Progress] 4788ms chunk assets processing
 [webpack.Progress] 23ms additional chunk assets processing
 [webpack.Progress] 22116ms chunk asset optimization
 [webpack.Progress] 19531ms after chunk asset optimization
 [webpack.Progress] 223ms emitting
 [webpack.Progress] 689ms after emitting

🌍 Your Environment


Angular CLI: 9.1.4
Node: 12.16.2
OS: win32 x64

Angular: 9.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: 

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.4
@angular-devkit/build-angular     0.901.4
@angular-devkit/build-optimizer   0.901.4
@angular-devkit/build-webpack     0.901.4
@angular-devkit/core              9.1.4
@angular-devkit/schematics        9.1.4
@angular/cdk                      9.2.2
@ngtools/webpack                  9.1.4
@schematics/angular               9.1.4
@schematics/update                0.901.4
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant? package.json

{
  "name": "angular2",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "node --max_old_space_size=3072 ./node_modules/\\@angular/cli/bin/ng",
    "build": "npm run ng build -- --prod --aot",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "replace-version": "node ./replace.build.js",
    "sentry-cli": "sentry-cli"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "9.1.4",
    "@angular/cdk": "^9.2.2",
    "@angular/common": "9.1.4",
    "@angular/compiler": "9.1.4",
    "@angular/core": "9.1.4",
    "@angular/forms": "9.1.4",
    "@angular/localize": "^9.1.4",
    "@angular/platform-browser": "9.1.4",
    "@angular/platform-browser-dynamic": "9.1.4",
    "@angular/router": "9.1.4",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sentry/browser": "^5.5.0",
    "@sweetalert2/ngx-sweetalert2": "^8.1.0",
    "angulartics2": "^9.0.0",
    "blueimp-canvas-to-blob": "^3.14.0",
    "bootstrap": "^4.3.1",
    "cd-themify-icons": "0.0.1",
    "chart.js": "^2.8.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "cropperjs": "^1.2.2",
    "custom-event": "1.0.0",
    "decimal.js-light": "^2.5.0",
    "dragula": "^3.7.2",
    "fabric": "^2.7.0",
    "file-saver": "^2.0.0",
    "font-awesome": "^4.7.0",
    "intl": "^1.2.5",
    "js-levenshtein": "^1.1.6",
    "moment": "^2.18.1",
    "moment-range": "^2.2.0",
    "ng-busy": "^9.0.0",
    "ng2-charts": "^2.3.0",
    "ng2-daterangepicker": "^3.0.1",
    "ng2-dragula": "^2.1.1",
    "ng2-file-upload": "^1.4.0",
    "ng2-pdf-viewer": "^5.2.3",
    "ngx-chips": "^2.1.0",
    "ngx-drag-scroll": "^7.4.3",
    "ngx-filesaver": "^2.2.0",
    "primeicons": "^2.0.0",
    "primeng": "^9.0.6",
    "print-js": "^1.0.61",
    "progressbar.js": "^1.0.1",
    "quill": "^1.3.6",
    "rxjs": "^6.5.5",
    "smoothscroll-polyfill": "^0.3.5",
    "sweetalert2": "^9.7.0",
    "ts-helpers": "^1.1.1",
    "tslib": "^1.10.0",
    "typescript": "3.8.3",
    "web-animations-js": "^2.3.2",
    "xlsx": "^0.12.9",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.4",
    "@angular/cli": "9.1.4",
    "@angular/compiler-cli": "9.1.4",
    "@types/fabric": "^2.6.13",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "^2.0.41",
    "@types/node": "^12.11.1",
    "@types/pdfjs-dist": "^2.1.2",
    "@types/xlsx": "0.0.36",
    "codelyzer": "^5.1.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "replace-in-file": "^2.6.3",
    "sentry-cli-binary": "^1.19.1",
    "ts-node": "~2.0.0",
    "tslint": "^5.15.0"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular2": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/dragula/dist/dragula.css",
              "src/primeng-theme.css",
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/js/omise.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "hidden": true,
                "vendor": false
              },
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "node_modules/moment/locale/",
                  "with": "src/locale/"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular2:build"
          },
          "configurations": {
            "staging": {
              "browserTarget": "angular2:build:staging"
            },
            "production": {
              "browserTarget": "angular2:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular2:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "scripts": [
              "src/assets/js/omise.js"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/primeng/resources/themes/omega/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/ng2-dnd/bundles/style.css",
              "node_modules/dragula/dist/dragula.css",
              "src/styles.css"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "angular2-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "angular2:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "angular2",
  "schematics": {
    "@schematics/angular:component": {
      "skipTests": true,
      "prefix": "app",
      "style": "css"
    },
    "@schematics/angular:directive": {
      "skipTests": true,
      "prefix": "app"
    },
    "@schematics/angular:guard": {
      "skipTests": true
    },
    "@schematics/angular:pipe": {
      "skipTests": true
    },
    "@schematics/angular:service": {
      "skipTests": true
    }
  }
}

tsconfig.json

  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
alan-agius4 commented 4 years ago

Hi @mix5003, from your package.json, I am seeing a lot dependencies and some of those are relatively big, which might be the result in slow builds, but we'd like to take a look at the reproduction first.

Can you share the reproduction privately with the team?, thanks

mix5003 commented 4 years ago

i invited you. please take a look.

alan-agius4 commented 4 years ago

Hi @mix5003, thanks for the reproduction.

Seeing the large amount of dependencies in your application that eventually tools in the pipeline like Webpack, Build-Optimizer and Terser will need to speend more time and resources to optimize the output.

In this case the biggest chunk of time is caused by Webpack's module concatenation, this unfortunately is based on the total modules in the compilation, so the more you add the slower the build will become. You can disable module concatenation using 3rd party builders such as ngx-build-plus, this is not recommended because while this does speed up your build it generates larger bundles and code which is slower to execute in the browser.

My personal suggestion would be the evaluate if all the dependencies are really needed . I am seeing multiple UI frameworks such as ngprime, bootstrap, ng-dracula and more...

angular-automatic-lock-bot[bot] commented 4 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.