供应商捆绑包大小未减少

Question

I'm trying to get my build much smaller to get my load time faster, but when I run

ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer and then run a lighthouse report from google dev tools

I get

what's odd is that it seems to have worked if I go into the dist folder to look at file sizes, which seem smaller that the lighthouse report.

So far to reduce the size by doing the following:

• Removed old/unused package.json entries
• changed all material imports to specific path like for paginator I'm importing now as import { MatPaginator } from "@angular/material/paginator"; instead of import { MatPaginator } from "@angular/material/"; per the advice from other posts.
• replaced moment with moment.min.js so that locales don't get added
• added brotli for text compression.

Also I want to mention because I don't know if it's relevant, but I don't have a webpack.config.js file only a custom-webpack.config.js for brotli. The only thing I edited in angular.json to get webpack working was this for brotli

  "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
             },

I've never used webpack before so this could be an issue, but I'm not sure.

package.json

{
  "name": "mean-course",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --mode development --open",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:server": "nodemon backend/server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.13",
    "@angular/cdk": "~8.2.2",
    "@angular/common": "~8.2.4",
    "@angular/compiler": "~8.2.4",
    "@angular/core": "~8.2.4",
    "@angular/forms": "~8.2.4",
    "@angular/material": "^8.2.2",
    "@angular/platform-browser": "~8.2.4",
    "@angular/platform-browser-dynamic": "~8.2.4",
    "@angular/router": "~8.2.4",
    "@ng-bootstrap/ng-bootstrap": "^5.1.5",
    "@ngrx/store": "^8.6.0",
    "ably": "^1.1.22",
    "angular-doka": "file:src/angular-doka",
    "angular-filepond": "^1.0.5",
    "azure-arm-rediscache": "^3.0.0",
    "bootstrap": "^4.4.1",
    "classlist.js": "^1.1.20150312",
    "countdown": "^2.6.0",
    "dotenv": "^8.2.0",
    "filepond": "^4.13.4",
    "filepond-plugin-file-encode": "^2.1.5",
    "filepond-plugin-file-validate-size": "^2.2.0",
    "filepond-plugin-file-validate-type": "^1.2.5",
    "filepond-plugin-image-crop": "^2.0.3",
    "filepond-plugin-image-edit": "^1.6.0",
    "filepond-plugin-image-exif-orientation": "^1.0.7",
    "filepond-plugin-image-preview": "^4.6.1",
    "filepond-plugin-image-resize": "^2.0.4",
    "filepond-plugin-image-transform": "^3.7.2",
    "jquery": "^3.5.1",
    "jsonwebtoken": "^8.5.1",
    "lib-storage-service": "^1.0.2",
    "material": "^0.4.1",
    "moment-mini": "^2.24.0",
    "ng-starrating": "^1.0.20",
    "ngx-bar-rating": "^1.1.0",
    "ngx-clipboard": "^12.3.0",
    "ngx-device-detector": "^1.3.20",
    "ngx-filepond": "^5.0.1",
    "ngx-light-carousel": "^1.0.37-beta.8",
    "ngx-pagination": "^5.0.0",
    "ngx-simple-countdown": "^1.0.2",
    "ngx-spinner": "^8.0.3",
    "ngx-toastr": "^11.2.1",
    "ngx-ui-carousel": "^1.3.2",
    "numeral": "^2.0.6",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "tsoa": "^2.5.7",
    "uid": "0.0.2",
    "web-animations-js": "^2.3.2",
    "yamljs": "^0.3.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "8.4.1",
    "@angular-devkit/build-angular": "^0.803.26",
    "@angular/cli": "~8.3.2",
    "@angular/compiler-cli": "~8.2.4",
    "@angular/language-service": "~8.2.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.59",
    "brotli-gzip-webpack-plugin": "^0.5.0",
    "brotli-webpack-plugin": "^1.1.0",
    "codelyzer": "^5.0.0",
    "compression-webpack-plugin": "^4.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "browser": {
    "crypto": false
  }
}

Here is a stats.json file when using ng build --prod

Here's a more detailed version as well

Answer 1

Remove libraries like ngx-spinner, filepond etc. which are huge as they are not treeshakable. Also if you have not configured your server to serve gzip files, do that. It will give you huge reduction in size. Also pre gzip your js files after build my using a utility like gzip-all.

https://www.npmjs.com/package/gzip-all

Also change your server max cache policy to get caching benefits.