angular - 在构建开发版本时“生成浏览器应用程序包”消息

Question

我正在使用Angular 12.0.2并看到消息Generating browser application bundles。我不是在构建prod版本，而是在运行dev版本。这是Angular Development Build的正常行为吗？

Google Chrome DevTools 源文件：

Answer 1

我试图为自己解决这个问题，但我没有运气，但我能够找到解决这个问题的方法，这将允许您在开发工具中查看源代码。您所要做的就是在 angular.json 文件中创建一个开发配置，然后在 serve:browsertarget 中提供您的配置名称。

就像这个块：- 你会发现你的 angular.json 有下面的代码

      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "<your project>:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "<your project>:build:production"
        }
      }
    }

您所要做的就是使用您自己的开发配置更新此代码块。像这样：

      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
      "development": {
          "optimization": false,
          "buildOptimizer": false,
          "sourceMap": true
        }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "<your project>:build:development"
      },
      "configurations": {
        "production": {
          "browserTarget": "<your project>:build:production"
        }
      }
    }

因此，您在这里创建自己的开发配置，您可以在其中取消优化和 buildOptimizer。之后你可以只做 ng serve ，它会显示开发工具中的所有源代码。它也不会影响您的生产构建。

我仍在试图弄清楚为什么 Angular 甚至为开发环境优化代码。之后我会更新答案。但现在上面的代码是回答你的问题。

Answer 2

是的，这很正常。它甚至告诉您不要将此构建用于 PRODUCTION 版本。