Angular9迁Angular10的Ionic项目构建时Babel日志过大求助

我把基于Angular 9的Ionic项目迁移到Angular 10后，功能正常，但执行ng build --prod生产构建时，Babel日志陷入循环，生成了6.4GB的日志文件。尝试过多种Babel配置都无法解决。日志内容是Babel对代码AST节点的详细遍历记录，示例如下：

2023-03-17T16:06:58.965Z babel program.directives[0] Directive: enter
2023-03-17T16:06:58.965Z babel program.directives[0] Directive: Recursing into...
2023-03-17T16:06:58.965Z babel program.directives[0].value DirectiveLiteral: enter
2023-03-17T16:06:58.965Z babel program.directives[0].value DirectiveLiteral: Recursing into...
2023-03-17T16:06:58.965Z babel program.directives[0].value DirectiveLiteral: exit
2023-03-17T16:06:58.965Z babel program.directives[0] Directive: exit
...（省略后续重复日志）

1. 调整Babel日志级别 #

项目根目录的babel.config.json或.babelrc中，针对生产环境设置日志级别为warn或error，减少冗余日志输出：

{
  "env": {
    "production": {
      "logLevel": "warn",
      "comments": false,
      "compact": true
    }
  }
}

如果使用自定义webpack配置，在webpack.config.js的Babel loader选项中添加日志级别设置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            logLevel: 'warn'
          }
        }
      }
    ]
  }
};

2. 限制Angular构建日志级别 #

执行构建命令时显式指定日志级别，覆盖默认的详细输出：

ng build --prod --log-level warn

也可以在angular.json的生产构建配置中永久设置：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "logLevel": "warn"
            }
          }
        }
      }
    }
  }
}

3. 排查循环依赖导致的AST遍历死循环 #

日志无限循环可能是代码中存在循环依赖，导致Babel遍历AST时陷入死循环：

• 执行ng lint检查代码中的循环依赖问题
• 使用madge工具分析项目依赖关系：

npx madge --circular src/

找到循环依赖后，重构代码打破循环逻辑。

4. 更新Babel相关依赖 #

过时的Babel插件或依赖可能与Angular 10不兼容，执行以下命令更新：

npm update @babel/core @babel/preset-env babel-loader

同时检查package.json，确保所有Babel相关依赖版本一致，避免版本冲突。

内容的提问来源于stack exchange，提问作者Swayangjit