{
"name": "ClientApp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/http": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "2.2.3",
"popper.js": "^1.14.5",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26",
"angular": "1.5.5",
"angular-animate": "1.5.5",
"angular-aria": "1.5.7",
"angular-cookies": "1.5.5",
"angular-mocks": "1.5.5",
"angular-sanitize": "1.5.5",
"angular-scroll": "1.0.2",
"angular-ui-bootstrap": "1.3.3",
"angular-ui-grid": "4.0.4",
"angular-ui-router": "1.0.3",
"animate": "1.0.0",
"animate.css": "3.5.2",
"jquery-ui": "1.12.1",
"jquery.inputmask": "3.3.4",
"lodash": "4.17.11",
"ionicons": "2.0.1",
"moment": "2.13.0",
"ng-mask": "3.1.1",
"spin.js": "2.3.2",
"stacktrace-js": "2.0.0",
"toastr": "2.1.2",
"waypoints": "4.0.1",
"@angular/upgrade": "7.1.1",
"angular2-template-loader": "0.6.2",
"@ngrx/effects": "^6.0.1",
"@ngrx/store": "^6.0.1",
"@ngrx/store-devtools": "^6.0.1",
"ngx-page-scroll": "5.0.1",
"ngx-toastr": "9.1.1",
"@aspnet/signalr": "1.1.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.11.0",
"@angular/cli": "~7.1.0",
"@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0",
"@types/angular": "1.6.51",
"@types/core-js": "2.5.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "10.12.11",
"codelyzer": "~4.5.0",
"css-loader": "0.8.0",
"file-loader": "2.0.0",
"imports-loader": "0.8.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"style-loader": "0.8.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6",
"url-loader": "1.1.2",
"webpack-cli": "^3.1.2"
}
}
У меня было приложение, которое было в Angular JS 1.5, Теперь мы решили перенести его.В рамках первоначального анализа я делал простой POC, состоящий всего из 10-15 компонентов, которые не имеют сложной бизнес-логики.Я скопировал несколько стилей из предыдущего приложения, и это все.Используя только эти 15 компонентов, когда я создавал новое приложение с
ng build --prod --vendor-chunk --sourceMap=false --
, я понял, что приложение Angular 7 имеет очень большой размер кучи по сравнению с нашим существующим приложением на основе Angular JS.Основное отличие заключается в строковых объектах, которые очень велики в Angular 7, я просто хочу понять, нормально ли это для Angular 7, или я что-то здесь упускаю.
Также с опцией --aot размер кучиеще больше.У нас есть пара требований, таких как открытие в новом окне (которое снова загружает все приложения на новой вкладке Chrome с другим маршрутом).Я боюсь, что если пользователь откроет 3 или более вкладок, память достигнет около Гб.
Есть ли какой-нибудь способ, которым мы можем минимизировать время выполнения кучи памяти, особенно этих строк?Я прилагаю изображения из Chrome Dev Tools и мой файл angular.json здесь.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ClientApp": {
"root": "ClientApp",
"sourceRoot": "ClientApp",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot/clientapp/dist",
"index": "ClientApp/index.html",
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets",
{
"glob": "**/*",
"input": "Content",
"ignore": [ "*.js", "*.css" ],
"output": "Content/"
},
],
"styles": [
"ClientApp/styles.css",
"Content/themes/base/jquery-ui.min.css",
"Content/dmsglobalstyles.css",
"Content/styles-extension.css",
"Content/responsive-styles.css"
],
"scripts": [
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "ClientApp/environments/environment.ts",
"with": "ClientApp/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": true,
"aot": false,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ClientApp:build"
},
"configurations": {
"production": {
"browserTarget": "ClientApp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ClientApp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "ClientApp/test.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.spec.json",
"karmaConfig": "ClientApp/karma.conf.js",
"styles": [
"ClientApp/styles.css"
],
"scripts": [],
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"ClientApp/tsconfig.app.json",
"ClientApp/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ClientApp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ClientApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "ClientApp:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ClientApp"
}
Комплект разработчика Dev