Angular 7 不会缩小 html、js、css 文件答案

【问题标题】：Angular 7 is not minifying html, js, css filesAngular 7 不会缩小 html、js、css 文件
【发布时间】：2019-03-14 13:45:23
【问题描述】：

我在 Angular 7 中的项目有问题。

问题是编译后我在 Chrome 控制台中没有缩小和 uglified 文件。在production 环境中运行项目后，我在控制台中收到了以下信息：

Time: 31790ms
chunk {main} main.js (main) 11.3 MB [initial] [rendered]
chunk {polyfills} polyfills.js (polyfills) 539 kB [initial] [rendered]
chunk {runtime} runtime.js (runtime) 6.04 kB [entry] [rendered]
chunk {scripts} scripts.js (scripts) 52.1 kB [entry] [rendered]
chunk {styles} styles.js (styles) 654 kB [initial] [rendered]

如您所见，chunk {main} 已超过 11.3 MB。

进入 Chrome 控制台后，我可以在我的 Sources 中看到这些文件：

不幸的是，只有scripts.4d10c1b333ada0ab6568.js 被完全缩小。其余文件未受影响，也未缩小和丑化。

我试图找到一个解决方案，我发现这应该放在我的angular.json文件中：

这也无济于事。这是我的package.json 文件：

任何人都可以帮助设置我的项目以创建丑陋和缩小的文件吗？谢谢！

从package.json更新依赖：

"dependencies": {
    "@angular/animations": "^7.2.1",
    "@angular/cdk": "^7.1.1",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "@types/moment": "^2.13.0",
    "bindings": "^1.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "dotenv": "^6.2.0",
    "fuzzy": "^0.1.3",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.13.1",
    "jquery": "^3.3.1",
    "lscache": "^1.3.0",
    "moment": "^2.24.0",
    "ngx-dropdown-list": "^1.1.1",
    "ngx-slick": "^0.2.1",
    "ngx-slick-carousel": "^0.4.4",
    "ngx-smart-modal": "^7.1.1",
    "ngx-stripe": "^6.0.0-rc.0",
    "ngx-toastr": "^9.1.1",
    "node": "^11.6.0",
    "node-sass": "^4.11.0",
    "reflect-metadata": "^0.1.12",
    "rollbar": "^2.5.1",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "slick-carousel": "^1.8.1",
    "tiny-slider": "^2.9.1",
    "ts-loader": "^5.3.1",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.28"
  }

整个angular.json文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-portal": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
            "outputPath": "dist/project-portal",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/app/styles/style.scss",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js"
            ]
          },
          "configurations": {
            "qa": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.qa.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "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": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "project-portal:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "project-portal:build:production"
            },
            "qa": {
              "browserTarget": "project-portal:build:qa"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-portal: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/styles.scss",
              "node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": [
              "./node_modules/moment/min/moment.min.js"
            ],
            "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/**"
            ]
          }
        }
      }
    },
    "project-portal-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "project-portal:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-portal:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "project-portal"
}

【问题讨论】：

您如何构建您的应用程序？你是如何创建你的应用程序的？你是用 angular/cli 还是别的什么？
我正在构建它并使用命令运行：npm run start:prod。应用是使用 angular/cli 创建的。
ng build --configuration=production 应该使您的构建使用您在上面的 angular.json 文件中显示的配置参数。此外，请确保您在 angular.json 文件中更新了正确的配置部分。如果您在工作区中创建了多个应用程序，则每个应用程序都有一个条目。
你可以尝试下一步吗：使用 ng 命令更新 package.json：{ "ng": "ng" "build": "ng build" } 并运行命令 npm run build -- --刺激并再次检查
@Drag13 我添加了 { "ng": "ng" "build": "ng build" } 但这是我在构建后收到的内容：时间：45504ms 块 {main} main.a8377ca7b7d82e8383aa。 js (main) 10.5 MB [初始] [渲染] 块 {polyfills} polyfills.20073962a51430aa9622.js (polyfills) 539 kB [初始] [渲染] 块 {runtime} runtime.618bcded6741c4c27fdf.js (runtime) 6.04 kB [entry] [渲染] 块 {scripts} scripts.4d10c1b333ada0ab6568.js (scripts) 52.1 kB [entry] [rendered] chunk {styles} styles.21ba0f4957e4e98a179c.css (styles) 619 kB 看起来仍然没有缩小它们，尤其是对于 main

标签： angular minify uglifier

【解决方案1】：

好的，看来我想通了。 angular.json 文件中的“Builder”选项已更改。这是因为项目中使用了自定义 webpack。简单地改变了：

"builder": "@angular-builders/custom-webpack:browser"

到：

"builder": "@angular-devkit/build-angular:browser"

解决了在生产环境中缩小所有文件的问题。

【讨论】：

【解决方案2】：

如果你想从你的 npm start 和随后的 build 脚本运行 Angular CLI 而不像你设置的那样直接使用别名 ng，你可能需要确保并在node_modules 文件夹。它应该是以下内容（并添加您的附加脚本；我无法从您的屏幕截图中复制）：

build: "node node_modules/@angular/cli/bin/ng build --prod"

您也不应该需要 --aot 标志，因为 "aot": true 已涵盖该标志。作为一个单独的测试，您应该独立运行 ng build --prod 并检查指定输出路径中的捆绑包："outputPath": "dist/project-portal" 我怀疑您用于 npm run build 的 npm 命令的组合不正确并选择正确的命令/配置.捆绑包没有被缩小的原因很明显，因为 buildOptimizer、optimization 或 aot 标志没有从 angular.json 正确读取

【讨论】：