如何在2秒以下加载角6

Question

嗨，我已经在下面实现了以下内容

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

1. 如果我清除浏览器然后初始加载页面供应商和主js文件大小2.4MB和223 KB。

在初始页面加载之后，为什么它仍然加载初始应用程序模块超过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-路由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标志检查了构建它的应用程序的加载/响应时间？在构建之前检查是否在angular.json配置/发布/优化中将optmization标志设置为true

Answer 2

为什么不实现服务工作者。它会使您的页面加载更快。

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