Angular 6 How to Increase speed of Inital load Page

Question

Hi, I can't figure out to gzip compression response from server to decrease bundle JS size!!!.

• I have tried this link 1 ,link 2, link 3 but can't success still Initial loading page too slow.
• Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB.
• I have routing module with rendered components based on router.
• I have updated with package.json & angular.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks

Package.JSON

    {
      "name": "cfch",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve  --proxy-config  proxy.conf.json ",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
    "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/common": "^6.1.0",     //may be I need to downgrade to lower version? 
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",

      },
       "devDependencies": {
        "@angular-devkit/build-angular": "^0.8.8",
        "@angular/cli": "6.1.0",
        "@angular/compiler-cli": "^6.1.0",
        "@angular/language-service": "^6.1.0",
        "@types/jasmine": "^2.8.14",
         "typescript": "^2.7.2"
         }
    }

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "CFCH": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/CFCH",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/theme.less",
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "CFCH:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "CFCH:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "CFCH:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/theme.less",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "CFCH-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "CFCH:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "CFCH:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "CFCH"
}

app-routing.module.ts

    const routes: Routes = [
    {
        path: '',
        component: CfchDataTableComponent,
       //loadChildren:'./cfch-data-table/cfch-data-table.component#CfchDataTableComponent',  //lazy loaded module
        //path: '', loadChildren: () => CfchDataTableComponent,
        data: { preload: true }

        //pathMatch: 'full',
    },
    {
        path:'singleCompanyStockList',
        component:SingleCompanyListComponent
    },
    {
        path:'valuation',
        component:ValuationComponent
    },
    {
        path:'risk',
        component:RiskComponent
    },
    {   path:'login',
    component:LoginComponent
   },
   {   path:'register',
    component:RegisterPageComponent
   },
   {   path:'forgetPwd',
    component:ForgetPasswordComponent
   },
   {   path:'info',
    component:InfoComponent
   },
   {   path:'essentialInfo',
    component:EssentialInfoComponent
  },

   {    path:'manageCompany',
        //canActivate: [AuthGuard],
        component:ManageCompanyComponent
   },

   {   
        path:'dataManage',
        //canActivate: [AuthGuard],
        component:DatamanageComponent
   },
   {
        path:'benchmark',
        canActivate: [AuthGuard],
        component:BenchmarkingComponent
   },
   {
    path:'financeEntry',
    component:FinanceEntryComponent
   },



   {   path:'joinUS',
        component:JoinUsPageComponent,
   },

];
@NgModule({
    imports: [RouterModule.forRoot(routes)
    ],
    exports: [RouterModule],
})
export class AppRoutingModule { }

- please see attached browser console network result

Answer 1

**lazy loading ** Yo have to change app routing module to lazy loading modules.dramatically decrease the size of main.js and vendor.js.

Answer 2

Enable production compilation by modifying your package.json

This:

{
  "name": "cfch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve  --proxy-config  proxy.conf.json ",
    "build": "ng build",

should be:

(Add --prod)

{
  "name": "cfch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve  --proxy-config  proxy.conf.json ",
    "build": "ng build --prod",

Your vendor Java script should be dramatically smaller in your dist directory.

Of course this will not change the Java script size when running "npm start". That is developer mode.

Answer 3

Gzip is done by your hosting server, that serves your angular app. It have nothing do with your javascript framework be it angular or any other.

Having that out of the way most cloud hosting service providers configures gzip compression out of the box. But the one I found free and easier for personal projects trials is firebase.com from google which also provides SSL for free too you can check out their hosting service.