Main.js file too large in angular 12

Question

While making build i am getting too large main js file. i am using lazy loading in all component but still my main js file to large

i am providing config details below. Please let me know any solution for this i am attaching build size image too. please find below

While making build i am getting too large main js file. i am using lazy loading in all component but still my main js file to large

i am providing config details below. Please let me know any solution for this i am attaching build size image too. please find below

enter image description here

  "name": "kapilguru",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "serve": "serve --open",
    "start": "ng serve --source-map=false --host 0.0.0.0 --disable-host-check ",
    "build": "ng build --configuration=production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^12.2.2",
    "@angular/cdk": "^11.2.4",
    "@angular/common": "~12.2.2",
    "@angular/compiler": "~12.2.2",
    "@angular/core": "~12.2.2",
    "@angular/forms": "~12.2.2",
    "@angular/material": "^11.2.4",
    "@angular/platform-browser": "^12.2.2",
    "@angular/platform-browser-dynamic": "~12.2.2",
    "@angular/router": "~12.2.2",
    "@material/button": "^10.0.0",
    "@material/notched-outline": "^10.0.0",
    "@material/ripple": "^10.0.0",
    "@material/textfield": "^10.0.0",
    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
    "@types/file-saver": "^2.0.2",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "angular-ng-autocomplete": "^2.0.5",
    "angularx-social-login": "^3.5.7",
    "assert": "^2.0.0",
    "bootstrap": "^4.0.0-beta.2",
    "chart.js": "^2.9.3",
    "ckeditor4-angular": "^2.2.1",
    "crypto-browserify": "^3.12.0",
    "file-saver": "^2.0.5",
    "fs-web": "^1.0.1",
    "hammerjs": "^2.0.8",
    "html2canvas": "^1.0.0-rc.7",
    "https-browserify": "^1.0.0",
    "jquery": "^3.6.0",
    "jspdf": "^2.3.1",
    "material-icons": "^0.5.4",
    "ng-circle-progress": "^1.6.0",
    "ng-connection-service": "^1.0.4",
    "ng-otp-input": "^1.7.1",
    "ng2-charts": "^2.2.3",
    "ng2-file-upload": "^1.4.0",
    "ngx-editor": "^9.0.2",
    "ngx-image-cropper": "^3.3.5",
    "ngx-material-timepicker": "^5.5.3",
    "ngx-owl-carousel-o": "^5.1.0",
    "ngx-spinner": "^11.0.2",
    "ngx-toastr": "^13.2.1",
    "os-browserify": "^0.3.0",
    "paytm-blink-checkout-angular": "^0.0.2",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primeng": "^11.4.0",
    "quill": "^1.3.7",
    "rxjs": "~6.6.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "sweetalert2": "^11.0.16",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "webex": "^1.136.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.2.6",
    "@angular/cli": "~12.2.2",
    "@angular/compiler-cli": "~12.2.2",
    "@types/jasmine": "~3.6.0",
    "@types/jquery": "^3.5.5",
    "@types/jspdf": "^2.0.0",
    "@types/lodash": "^4.14.172",
    "@types/node": "^12.11.1",
    "@types/sizzle": "^2.3.3",
    "@types/uuid": "^8.3.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }
}

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "disableSizeLimit": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "allowJs": true,
    "removeComments": true,
    "skipLibCheck": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "ES2015",
      "es2018",
      "dom"
    ],
    "paths" : {
      "crypto": ["./node_modules/crypto-browserify"],
      "stream": ["./node_modules/stream-browserify"],
      "assert": ["./node_modules/assert"],
      "http": ["./node_modules/stream-http"],
      "https": ["./node_modules/https-browserify"],
      "os": ["./node_modules/os-browserify"],
      "fs": ["./node_modules/fs-web"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false,
    "fullTemplateTypeCheck": false,
    "strictInjectionParameters": true,
    "enableIvy": true
  }
}```

Answer 1

You can gzip your static assets by using "Compression"

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())