Javascript 使用第三方模块优化角度生产构建尺寸

我有以下包作为

package.json

文件的一部分：

"dependencies": {
        "@angular/animations": "10.1.3",
        "@angular/cdk": "10.2.2",
        "@angular/common": "10.1.3",
        "@angular/compiler": "10.1.3",
        "@angular/core": "10.1.3",
        "@angular/forms": "10.1.3",
        "@angular/platform-browser": "10.1.3",
        "@angular/platform-browser-dynamic": "10.1.3",
        "@angular/router": "10.1.3",
        "@angular/service-worker": "10.1.3",
        "@auth0/angular-jwt": "5.0.1",
        "@ng-bootstrap/ng-bootstrap": "^7.0.0",
        "animate.css": "^4.1.1",
        "bootstrap": "^4.5.2",
        "file-saver": "^2.0.2",
        "jquery": "^3.5.1",
        "localforage": "1.9.0",
        "lodash": "4.17.20",
        "moment": "2.29.0",
        "moment-timezone": "0.5.31",
        "ngx-cacheable": "^1.4.3",
        "ngx-quicklink": "^0.2.4",
        "primeicons": "^4.0.0",
        "primeng": "^10.0.0",
        "quill": "^1.3.7",
        "rxjs": "6.6.3",
        "rxjs-compat": "6.6.3",
        "tslib": "^2.0.1",
        "xlsx": "^0.16.7",
        "zone.js": "~0.11.1"
    },

共享模块具有以下针对第三方组件的导入

import {TableModule} from 'primeng/table';
import {DropdownModule} from 'primeng/dropdown';
import {MultiSelectModule} from 'primeng/multiselect';
import {InputTextModule} from 'primeng/inputtext';
import {CalendarModule} from 'primeng/calendar';
import {ContextMenuModule} from 'primeng/contextmenu';
import {ButtonModule} from 'primeng/button';
import {DynamicDialogModule} from 'primeng/dynamicdialog';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import { QuicklinkModule } from 'ngx-quicklink';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

而

angular.json

具有以下生产构建配置：

                "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,
                    "budgets": [{
                            "type": "initial",
                            "maximumWarning": "4mb",
                            "maximumError": "5mb"
                        },
                        {
                            "type": "anyComponentStyle",
                            "maximumWarning": "6kb"
                        }
                    ],
                    "serviceWorker": true,
                    "ngswConfigPath": "ngsw-config.json"
                },

现在，当我执行生产构建时，我得到以下输出

而且总的构建大小是

8.35mb

，这是不好的。我尝试过最小化样式表和所有内容，但没有任何显著的改进。如果有人能给我指引正确的方向，那将非常有帮助。

试试这个。它将有助于检查哪些包的大小过大，然后可以针对这些包搜索方法来减小大小。还可以在服务器端启用gzip压缩。这将有助于减少网站的初始加载。