Как сделать угловой 6 быстрее при загрузке менее 2 секунд

Question

Привет, я реализовал следующее ниже как

  1. lazy loading with CustomPreloadingStrategy module.
  2. Gulp Compress src img folders.
  3. Enable Gzip compression.

1. Если я очистил браузер, то начальная загрузка страницы поставщика и размер основного файла js 2,4 МБ и 223КБ.

Опять после начальной загрузки страницы, почему она все еще загружает исходный модуль приложения более 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",
}

app-routing-module.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 { }

CustomPreloadingStrategy.ts

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);
    }   }

• Я добавил несколько компаний (модуль, маршрутизатор, компоненты).

Пример: MultipleCompaniesRoutingModule.ts

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

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

angular.json

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

Answer 1

Вы проверяли время загрузки / отклика вашего приложения, собирающего его, с помощью флагов --prod --aot?Перед сборкой проверьте, установлены ли для флага настройки значения true в angular.json конфигурации / выпуск / оптимизация

Answer 2

Почему бы вам не внедрить сервисного работника.это заставит вашу страницу загружаться быстрее.

https://angular.io/guide/service-worker-intro.