Hi, I have implemented following below as
1. lazy loading with CustomPreloadingStrategy module.
2. Gulp Compress src img folders.
3. Enable Gzip compression.
- 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
}

CustomPreloadingStrategymethod?MultipleCompaniesModuletoo