0

Hi, I have implemented following below as

  1. lazy loading with CustomPreloadingStrategy module.
  2. Gulp Compress src img folders.
  3. Enable Gzip compression.
  1. If I cleared browser then initial load page vendor and main js file size 2.4MB and 223 KB.

Again after initial page load then why it's still load initial application module more than 8 seconds , I want to figure out below 2 seconds.

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);
    }   }
  • I added multiple companies (module, router, components).

Example: 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
   }

enter image description here

5
  • Could you provide us with CustomPreloadingStrategy method? Commented Mar 1, 2019 at 3:35
  • I updated my post.also i tried this reference link too :stackoverflow.com/questions/50434416/… Commented Mar 1, 2019 at 3:40
  • Thanks. Please add the MultipleCompaniesModule too Commented Mar 1, 2019 at 3:46
  • Can you show us the top part of your picture? Commented Mar 1, 2019 at 4:19
  • Updated my post.Thanks Commented Mar 1, 2019 at 8:24

2 Answers 2

1

Have you checked the loading/response times of your application building it with the --prod --aot flags? Before building check if you have the optmization flags set to true in angular.json configurations/release/optimization

Sign up to request clarification or add additional context in comments.

Comments

0

Why don't you implement a service worker . it will make your page load faster .

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.