[英]Angular-cli : Launch time is too slow
Need to improve my Angular2 application Launch time. 需要改善我的Angular2应用程序启动时间。 At preset it's taking 10-12 seconds to launch.
预设时需要10到12秒才能启动。
There are multiple modules in the application and each modules are loaded using lazy loading. 应用程序中有多个模块,每个模块都使用延迟加载进行加载。
Here's my package.json file 这是我的package.json文件
{
"name": "AppStore-cli",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.3.1",
"@angular/compiler": "2.3.1",
"@angular/core": "2.3.1",
"@angular/forms": "2.3.1",
"@angular/http": "2.3.1",
"@angular/material": "2.0.0-beta.1",
"@angular/platform-browser": "2.3.1",
"@angular/platform-browser-dynamic": "2.3.1",
"@angular/router": "3.3.1",
"@types/file-saver": "0.0.0",
"angular2-moment": "1.2.0",
"angular2-select": "1.0.0-beta.3",
"autotable": "1.0.0",
"core-js": "2.4.1",
"file-saver": "^1.3.3",
"jspdf": "1.3.2",
"jspdf-autotable": "2.3.1",
"md2": "0.0.16",
"ng2-auto-complete": "0.10.9",
"ng2-pagination": "2.0.0",
"ng2-slimscroll": "1.2.1",
"ng2-toastr": "1.4.1",
"rxjs": "5.0.1",
"ts-helpers": "1.1.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "2.3.1",
"@types/file-saver": "0.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-remap-istanbul": "0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "4.3.0",
"typescript": "~2.0.3"
}
}
angular-cli.json angular-cli.json
{
"project": {
"version": "1.0.0-beta.28.3",
"name": "AppStore-cli"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"./images/"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"css/indigo-pink.css",
"css/admin.css",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
],
"scripts": [
"../node_modules/core-js/client/shim.min.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I'm using following command to make build 我正在使用以下命令进行构建
ng build --prod
Here's the screensort of the files generation after completion of build. 这是构建完成后生成文件的屏幕排序。
Here's the screensort of load time.
这是加载时间的屏幕排序。
Can anybody help me with how i can reduce the launch time to 2-3 seconds or less than than? 有人可以帮助我将发射时间减少到2-3秒或更短吗?
Thanks 谢谢
There are few thing you could do: 您无能为力:
ng build -prod -aot --stats-json
ng build -prod -aot --stats-json
npm install --save-dev webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
webpack-bundle-analyzer dist/stats.json
webpack-bundle-analyzer dist/stats.json
gzip
) on your server (this alone should reduce vendor bundle to ~400kb) gzip
)(仅此一项就应将供应商捆绑包减少到〜400kb) If thing are still slow, look into server side rendering with universal, service and web workers... Google can help (; 如果仍然很慢,请与通用,服务和Web工作者一起研究服务器端渲染。Google可以提供帮助(;
Also consider upgrading to angular 4.0.0
. 还可以考虑升级到angular
4.0.0
。 It generates less code then 2.xx
. 它生成的代码少于
2.xx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.