如何使angular 6在2秒以下加载时更快

您好，我已经实现了以下功能：

如果我清除了浏览器，则初始加载页面供应商和 主js文件大小为2.4MB和223KB。

再次在初始页面加载之后，为什么初始应用程序模块的加载仍然超过8 秒，我想计算出2秒以下

package.json

 {
  "name": "cfch",
  "version": "0.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "ng": "ng",
    "start": "gulp && ng serve  --proxy-config proxy.conf.json",
    "build": "ng build --prod --build-optimizer",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prebuild": "gulp"
  },
 "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
}

   {
 "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
   }

应用程序路由模块.ts

  const routes: Routes = [
    {
      path: '',
      loadChildren: '../components/multiple-companies/multiple-companies.module#MultipleCompaniesModule',
      data: { preload: true }   // Custom property we will use to track what route to be preloaded
    },  
@NgModule({
    imports: [RouterModule.forRoot(routes,{
        preloadingStrategy: CustomPreloadingStrategy
    })
    ],
    providers: [ CustomPreloadingStrategy ],
    exports: [RouterModule],
})
export class AppRoutingModule { }

export class CustomPreloadingStrategy implements PreloadingStrategy {  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      return load();
    } else {
      return Observable.of(null);
    }   }

const multipleCompaniesRoutes: Routes = [
    { 
      path: '',
    component: MultipleCompaniesComponent,
    children: [ 
          {
          path: '',
            component: CfchDataTableComponent
            }  
        ]
    }   
];

@NgModule({
  imports: [ RouterModule.forChild(multipleCompaniesRoutes) ],
  exports: [ RouterModule ]
})
export class MultipleCompaniesRoutingModule { }

定制预加载策略.ts

  const routes: Routes = [
    {
      path: '',
      loadChildren: '../components/multiple-companies/multiple-companies.module#MultipleCompaniesModule',
      data: { preload: true }   // Custom property we will use to track what route to be preloaded
    },  
@NgModule({
    imports: [RouterModule.forRoot(routes,{
        preloadingStrategy: CustomPreloadingStrategy
    })
    ],
    providers: [ CustomPreloadingStrategy ],
    exports: [RouterModule],
})
export class AppRoutingModule { }

export class CustomPreloadingStrategy implements PreloadingStrategy {  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      return load();
    } else {
      return Observable.of(null);
    }   }

const multipleCompaniesRoutes: Routes = [
    { 
      path: '',
    component: MultipleCompaniesComponent,
    children: [ 
          {
          path: '',
            component: CfchDataTableComponent
            }  
        ]
    }   
];

@NgModule({
  imports: [ RouterModule.forChild(multipleCompaniesRoutes) ],
  exports: [ RouterModule ]
})
export class MultipleCompaniesRoutingModule { }

angular.json

 {
  "name": "cfch",
  "version": "0.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "ng": "ng",
    "start": "gulp && ng serve  --proxy-config proxy.conf.json",
    "build": "ng build --prod --build-optimizer",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prebuild": "gulp"
  },
 "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
}

   {
 "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
   }

---

为什么不实施一个服务人员呢。这将使您的页面加载更快

---

您是否检查了使用--prod--aot标志构建应用程序的加载/响应时间？

---

在构建之前，请检查angular.json配置/release/optimization中的optmization标志是否设置为true

能否为我们提供

CustomPreadlingStrategy

方法？我更新了我的帖子。我也尝试了这个参考链接：谢谢。请添加

MultipleCompaniesModule

too你能给我们看一下你照片的顶部吗？更新了我的帖子。谢谢