0

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 Chrome Dev Console

sameer
  • 447
  • 3
  • 12
  • 20
  • What is the size of the bundles on a production build? `ng build --prod` – Sterex Jan 04 '19 at 09:47
  • Angular bundle size such as vendor.js 15 MB size, main.js 784KB, style.js 952KB – sameer Jan 04 '19 at 09:59
  • That is an insane vendor bundle - are you using the AOT compiler/build optimizer? (and if not, why not?) – hevans900 Jan 04 '19 at 10:20
  • I have updated with package.json file , I just run my application with npm start then initial loading page too slow almost 16.9 MB size transferred.Thanks – sameer Jan 04 '19 at 11:15
  • modify package.json. Change "build": "ng build", to "build": "ng build --prod", – rjdkolb Jan 07 '19 at 05:34

3 Answers3

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.

SaMiCoOo
  • 327
  • 2
  • 10
  • I want to reduce bundle JS files because angular initial loading too slow , please see above picture result browser console network transfer 16.9 MB , so how can I reduce about size ?Thanks – sameer Jan 04 '19 at 09:38
  • There is an edit on your linked question that applies to you: `EDIT: Seems I misunderstood the question, if it is about bundle size when serving the stuff to the end user, you should take a look at AOT + Rollup to minimize your bundle sizes. And enable gzip compression on your webserver when serving files (probably most servers have it enabled already).` – Sterex Jan 04 '19 at 09:45
  • @sameer can you post you package.json and angular.json files ? – SaMiCoOo Jan 05 '19 at 05:23
  • please see my post updated with angular.json file .Thanks – sameer Jan 07 '19 at 01:22
  • Ok after looking into your routing module, it seems that you put your whole app into one module, which is not the recommended way to develop with angular, as it produces very large initial payloads. The recommended way is to use lazy loading, angular uses the concept of lazy loading in the form of lazy loaded modules you can read about them here in the official docs (https://angular.io/guide/lazy-loading-ngmodules). And this video can give you good head-start https://www.youtube.com/watch?v=8tBQI5grhbE. But I suggest you read more on the topic of lazy loading. Good luck – SaMiCoOo Jan 07 '19 at 16:23
  • I have tried lazy loading with custom strategy pre-load even it's too slow , how to increase speed of load page with enable GZIP compression and ng build --prod-aot ? – sameer Feb 26 '19 at 05:12
1

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

Addisalem
  • 108
  • 4
0

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.

rjdkolb
  • 10,377
  • 11
  • 69
  • 89
  • Hi, after add --prod in build , I'm getting error like:" ERROR in ./src/app/app.module.ngfactory.js" , I'm using angular 6 and angular cli 7 version.reference link tried but no luck :https://stackoverflow.com/questions/48402695/error-cant-resolve-app-app-module-ngfactory-in-c-projects-project-cms-pr but I don't want to downgrade my latest version.Thanks – sameer Jan 07 '19 at 06:26
  • Can you switch your "@angular/cli": from "7.1.4" to "6.1.0" ? This is a big guess. The production compilation is a lot more strict (A good thing) Also don't mix versions, @angular/animations should be the same version as your other @angular components – rjdkolb Jan 07 '19 at 06:40
  • I used to build ng build --prod --aot=false – sameer Jan 07 '19 at 07:47
  • Your js will be much smaller, but not as small as it can be. – rjdkolb Jan 07 '19 at 07:58