Question

我正在尝试使构建更小以加快加载时间，但是在运行时

ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer，然后从Google开发工具运行灯塔报告

我知道

奇怪的是，如果我进入dist文件夹来查看文件大小（似乎比灯塔报告小），这似乎已经奏效。

到目前为止，通过执行以下操作来减小尺寸：

删除了旧的/未使用的package.json条目
将所有材料导入更改为特定路径，例如我现在要导入的分页器 import { MatPaginator } from "@angular/material/paginator"; 而不是根据其他帖子的建议import { MatPaginator } from "@angular/material/";。
将moment.min.js替换为moment，以免添加语言环境
添加了brotli用于文本压缩。

我也想提一提，因为我不知道它是否相关，但是我没有webpack.config.js文件，而brotli只有custom-webpack.config.js。为了使webpack正常工作，我在angular.json中进行的唯一编辑就是针对brotli

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

我以前从未使用过webpack，所以这可能是个问题，但我不确定。

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
  }
}

在使用ng build --prod

时，这是一个stats.json文件

这也是更详细的版本

Answer 1

删除诸如ngx-spinner，filepond等之类的库，这些库由于无法树状存储而非常庞大。另外，如果您尚未将服务器配置为提供gzip文件，请执行此操作。它将大大减少您的尺寸。在使用gzip-all之类的实用程序构建我的js文件后，还要预gzip您的js文件。

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

还可以更改服务器的最大缓存策略以获得缓存优势。

供应商捆绑包尺寸未减少

1 个答案: