production build - 80% chunk modules optimization ModuleConcatenationPlugin takes too much time about 15 minutes

[taoqingfeng]

Description:

when I build my project，the progress will always stoped at the '80% chunk modules optimization ModuleConcatenationPlugin'.

command

npm run bt-shushan-test

version

npm: 6.8.0
Angular CLI: 8.1.1
Node: 10.16.1
Angular: 8.1.1

package.json

`
{
"name": "tianzhu-spa",
"version": "0.2.7",
"license": "MIT",
"scripts": {
"ng": "ng",
"dev": "ng serve --configuration hmr",
"start": "ng serve --liveReload=true --port 4100",
"start-aot": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng serve --aot --live-reload true",
"build": "ng build",
"test": "ng test",
"test-tianzhu": "ng test --env tianzhu-dev",
"lint": "ng lint",
"e2e": "ng e2e",
"mock": "json-server -c src/mock-api/json-server.json ./src/mock-api/db.json",
"bt-shushan-dev": " node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build --prod=true --serviceWorker=true --c shushan-dev",
"bt-tianzhu-dev": " node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build --prod=true --serviceWorker=true --c tianzhu-dev",
"bt-shushan-test": " node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build --prod --build--optimizer --serviceWorker --c shushan-test",
"bt-tianzhu-test": " node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build --prod=true --serviceWorker=true --c tianzhu-test",
"bt-shushan-prod": " node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build --prod --build--optimizer --serviceWorker --c shushan-prod",
"bt-tianzhu-prod": " node --max_old_space_size=6144 node_modules/@angular/cli/bin/ng build --prod=true --serviceWorker=true --c tianzhu-prod"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.1.1",
"@angular/common": "^8.1.1",
"@angular/compiler": "^8.1.1",
"@angular/core": "^8.1.1",
"@angular/forms": "^8.1.1",
"@angular/http": "^7.2.11",
"@angular/platform-browser": "^8.1.1",
"@angular/platform-browser-dynamic": "^8.1.1",
"@angular/pwa": "^0.6.8",
"@angular/router": "^8.1.1",
"@angular/service-worker": "^8.1.1",
"@angularclass/hmr": "^2.1.3",
"@antv/g6": "^1.2.3",
"@antv/g6-plugins": "^1.0.2",
"angular2gridster": "^7.0.1",
"animate.css": "3.6.1",
"blob.js": "^1.0.1",
"bootstrap": "3.3.7",
"chart.js": "^2.6.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.10",
"countup.js-angular2": "^7.3.0",
"cryptico": "^1.0.2",
"crypto-js": "^3.1.9-1",
"echarts": "^4.1.0",
"file-saver": "^2.0.0-rc.4",
"font-awesome": "^4.7.0",
"formdata-polyfill": "^3.0.19",
"intl": "^1.2.5",
"jquery": "^3.1.0",
"jquery-slimscroll": "^1.3.8",
"jsencrypt": "^3.0.0-beta.1",
"jspdf": "^1.5.3",
"localforage": "^1.7.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"ng-zorro-antd": "^8.5.2",
"ngx-ueditor": "^2.1.3",
"node-sass": "^4.9.3",
"popper.js": "^1.15.0",
"primeicons": "^1.0.0",
"primeng": "6.0.0-alpha.1",
"rxjs": "^6.4.0",
"rxjs-tslint": "^0.1.7",
"sockjs-client": "^1.3.0",
"typedarray": "0.0.6",
"web-animations-js": "^2.3.2",
"webstomp-client": "^1.2.6",
"yarn": "^1.12.1",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^8.4.1",
"@angular-devkit/build-angular": "^0.803.24",
"@angular/cli": "^8.1.1",
"@angular/compiler-cli": "^8.1.1",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-numeric-separator": "^7.8.3",
"@babel/preset-env": "^7.9.0",
"@schematics/angular": "^8.1.1",
"@types/file-saver": "^1.3.1",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-plugin-import": "^1.13.0",
"codelyzer": "^4.5.0",
"happypack": "^5.0.1",
"html2canvas": "^1.0.0-rc.3",
"jasmine-core": "~3.1.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^1.2.0",
"protractor": "~5.3.2",
"ts-node": "~6.0.5",
"tslint": "^5.10.0",
"typescript": "~3.4.5",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack-parallel-uglify-plugin": "^1.1.2"
}
}

`

angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"tianzhu-spa": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js",
"mergeStrategies": {
"externals": "replace"
}
},
"indexTransform": "./index-html.transform.js",
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.json",
{
"glob": "/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/primeng/resources/primeng.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/primeicons/primeicons.css",
"src/assets/styles/theme.scss",
"src/assets/styles/theme_v6.0.0.scss",
"src/assets/styles/styles.scss",
"src/assets/styles/styles.primeng.scss",
"src/assets/font/iconfont/iconfont.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/vendor/pace/pace.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/font/iconfont/iconfont.js",
"src/assets/twaver/t.js",
"src/assets/twaver/twaver.js",
"src/assets/jtopo/jtopo.js"
],
"serviceWorker": true,
"webWorkerTsConfig": "tsconfig.worker.json"
},
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
"shushan-dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.shushan.dev.ts"
}
]
},
"tianzhu-dev": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.tianzhu.dev.ts"
}
]
},
"shushan-prod": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.shushan.prod.ts"
}
]
},
"tianzhu-prod": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.tianzhu.prod.ts"
}
]
},
"shushan-test": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.shushan.test.ts"
}
]
},
"tianzhu-test": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.tianzhu.test.ts"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "tianzhu-spa:build"
},
"configurations": {
"hmr": {
"hmr": true,
"browserTarget": "tianzhu-spa:build:hmr"
},
"shushan-dev": {
"browserTarget": "tianzhu-spa:build:shushan-dev"
},
"tianzhu-dev": {
"browserTarget": "tianzhu-spa:build:tianzhu-dev"
},
"shushan-prod": {
"browserTarget": "tianzhu-spa:build:shushan-prod"
},
"tianzhu-prod": {
"browserTarget": "tianzhu-spa:build:tianzhu-prod"
},
"shushan-test": {
"browserTarget": "tianzhu-spa:build:shushan-test"
},
"tianzhu-test": {
"browserTarget": "tianzhu-spa:build:tianzhu-test"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "tianzhu-spa:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/vendor/pace/pace.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/assets/font/iconfont/iconfont.js",
"src/assets/twaver/t.js",
"src/assets/twaver/twaver.js"
],
"styles": [
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/primeng/resources/primeng.css",
"node_modules/primeicons/primeicons.css",
"src/assets/styles/theme.scss",
"src/assets/styles/theme_v6.0.0.scss",
"src/assets/styles/styles.scss",
"src/assets/styles/styles.primeng.scss",
"src/assets/font/iconfont/iconfont.css"
],
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.json",
{
"glob": "/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json",
"tsconfig.worker.json",
"tsconfig.worker.json"
],
"exclude": []
}
}
}
},
"tianzhu-spa-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "tianzhu-spa:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": []
}
}
}
}
},
"defaultProject": "tianzhu-spa",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"@schematics/angular:directive": {
"prefix": "tz"
}
}
}

[alan-agius4]

Hi @tqfgithub, I am seeing that you are using a custom builder @angular-builders/custom-webpack:browser, kindly be aware that custom builders are not supported by the Angular tooling team.

Can you setup a minimal repro please without using custom builders and Angular CLI version 9?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[taoqingfeng]

ok，thank you。 It seems that because of my directory structure。 can't nest in depth？or the directory number is too much？size too big？ my src structure has 38.4MB size。

[taoqingfeng]

thank you

[angular-automatic-lock-bot]

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