Angular 4网站在延迟加载时加载速度非常慢

Question

我正在开发一个超过100页的网站，其中我创建了大约50页。我的问题是网站的初始加载时间需要超过30秒才能完全加载。它还显示我在网络选项卡中检查时传输的2.8 MB数据。我已将屏幕附加到相同的

我也在添加我的package.json，system.config.js和ts.config文件。

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "Subsource",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "docker-build": "docker build -t ng2-quickstart .",
    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
    "pree2e": "npm run webdriver:update",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "postinstall": "typings install",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "webdriver:update": "webdriver-manager update"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "~4.0.1",
    "@angular/compiler": "~4.0.1",
    "@angular/core": "~4.0.1",
    "@angular/forms": "~4.0.1",
    "@angular/http": "~4.0.1",
    "@angular/platform-browser": "~4.0.1",
    "@angular/platform-browser-dynamic": "~4.0.1",
    "@angular/router": "~4.1.0",
    "@angular/upgrade": "~4.0.1",
    "@swimlane/ngx-dnd": "^3.1.0",
    "@types/jquery": "^3.2.17",
    "angular-froala-wysiwyg": "^2.7.5",
    "angular2-cookie": "^1.2.6",
    "angular2-gmaps": "0.0.8",
    "angular2-signature-pad": "^1.0.2",
    "angular2-tag-input": "^1.2.3",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.7.2",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "ng2-datetime": "^1.4.0",
    "ng2-dnd": "^5.0.2",
    "ng2-file-upload": "^1.3.0",
    "ng2-tag-input": "^1.4.1",
    "ngx-bootstrap": "^2.0.0-rc.0",
    "ngx-chips": "^1.6.5",
    "ngx-loading": "^1.0.14",
    "ngx-tags-input": "^1.1.1",
    "primeng": "^5.2.0-rc.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.1",
    "systemjs": "0.19.39",
    "tslib": "^1.9.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "canonical-path": "0.0.2",
    "concurrently": "^3.0.0",
    "es6-promise-loader": "^1.0.2",
    "http-server": "^0.9.0",
    "jasmine-core": "~2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-htmlfile-reporter": "^0.3.4",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.2",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "^2.0.3",
    "typings": "^1.4.0",
    "webpack": "^2.1.0-beta.22"
  },
  "repository": {}
}

System.config

/** 
 * System configuration for Angular samples  
 **/
(function (global) {
    System.config({
        paths: {
            // paths serve as alias  
            'npm:': '../node_modules/'
        },
        // map tells the System loader where to look for things  
        map: {
            // our app is within the app folder  
            app: 'startup',

            // angular bundles  
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

            'angular2-signature-pad': 'npm:angular2-signature-pad/bundles/angular2-signature-pad.umd.min.js',

            // other libraries  
            'jquery': 'npm:jquery/dist/jquery.js',
            'ngx-loading': 'npm:ngx-loading/bundles/ngx-loading.umd',
            'rxjs': 'npm:rxjs',
            'angular2-cookie': 'npm:angular2-cookie',
            'lodash': 'npm:lodash/lodash.js',
            'primeng': 'npm:primeng',

            'primeng/growl': 'npm:primeng/growl',
            'ng2-dnd': 'npm:ng2-dnd/bundles/ng2-dnd.umd',
            'froala-editor': 'npm:froala-editor/js/froala_editor.pkgd.min.js',
            'angular-froala-wysiwyg': 'npm:angular-froala-wysiwyg/bundles/angular-froala-wysiwyg.umd',
            'ngx-chips': 'npm:ngx-chips/bundles/ngx-chips.umd',
            'ng2-material-dropdown': 'npm:ng2-material-dropdown/dist/ng2-dropdown.bundle',
            'ng2-file-upload': 'npm:ng2-file-upload/bundles/ng2-file-upload.umd'
        },
        // packages tells the System loader how to load when no filename and/or no extension  
        packages: {
            app: {
                main: '../../Startup/MasterStartup.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-cookie': {
                main: './core.js',
                defaultExtension: 'js'
            },
        }
    });
})(this);

TS Config

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "noStrictGenericChecks": true
  }
}

路由页面示例

import { Component } from "@angular/core"

export const MainRoutes = [
{ path: 'Dashboard', loadChildren: "../Modules/Dashboard/DashboardModule#DashboardModule" },

//Preference
{ path: 'AccountSettings', loadChildren: "../Modules/AccountSettings/AccountSettingsModule#AccountSettingsModule" },
{ path: 'Company', loadChildren: "../Modules/AccountSettings/Company/CompanyModule#CompanyModule" },
{ path: 'CompanyDetails', loadChildren: "../Modules/AccountSettings/Company/CompanyDetailsModule#CompanyDetailsModule" },
{ path: 'CompanyDetails/:CompanyGUID', loadChildren: "../Modules/AccountSettings/Company/CompanyDetailsModule#CompanyDetailsModule" },
//{ path: 'UserRole', loadChildren: "../Modules/AccountSettings/UserRole/UserRoleModule#UserRoleModule" },
{ path: 'UserRoleDetails', loadChildren: "../Modules/AccountSettings/UserRole/UserRoleDetailsModule#UserRoleDetailsModule " },

我注意到它会加载所有需要太长时间的页面。加载时间增加太多。那么有人可以为我提供一个减少加载时间的解决方案吗？

提前谢谢