Angular-cli：启动时间太慢

需要改进我的Angular2应用程序启动时间。预设时间为10-12秒。Angular-cli：启动时间太慢

应用程序中有多个模块，每个模块都使用延迟加载进行加载。

这是我的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" 
    } 
}

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

我用以下命令来使建立

ng build --prod

这里的screensort构建完成后的文件生成。

下面是加载时间的屏幕截图。

任何人可以帮助我，我怎么能启动的时间减少到2-3秒或小于比？

感谢

来源

2017-03-17 Pinank Lakhani

有，你可以做几件事：

运行ng build -prod -aot --stats-json
解决您可能遇到的任何错误（重建）
安装webpack-bundle-analyzenpm install --save-dev webpack-bundle-analyzer
运行webpack-bundle-analyzer dist/stats.json
看看你的包和remov E以外的任何不必要的代码
您的服务器上安装压缩（gzip）（这本身就应该供应商捆绑减少至〜400KB）

如果事情仍然缓慢，看看服务器端与普及，服务和网络工作者渲染... Google可以帮助（;

也考虑升级到角4.0.0。它生成的代码较少，然后2.x.x。

来源

2017-03-17 14:51:16 Sasxa

它给上纳克构建-prod -aot --stats JSON的错误 ERROR在预期的值 'Ng2PaginationModule' 由模块 ERROR在./src/main.ts 模块进口未发现：错误：在无法解析 './$$_gendir/app/app.module.ngfactory' @ ./src/main.ts 7：29-76 @多./src/main.ts 试过很多如何解决，但仍然存在。不知道为什么 –

@PinankLakhani Yea，如果您没有编写AoT友好代码，您可能会遇到错误。这可能很烦人（如果我没有记错，当你没有在某个地方导入某个模块时会发生这种特殊的错误。不确定这些错误是非常糟糕的，特别是在'2.x.x'中。 – Sasxa

Angular-cli：启动时间太慢

回答

相关问题