如何在Ionic开发服务器启用非压缩编译，提升调试效率与构建速度

项目环境信息 #

Ionic:

   Ionic CLI                     : 6.18.1 (/home/thomas/.nvm/versions/node/v14.15.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.14
   @angular-devkit/build-angular : 14.0.6
   @angular-devkit/schematics    : 14.0.6
   @angular/cli                  : 14.0.6
   @ionic/angular-toolkit        : 3.1.1

遇到的问题 #

运行ionic serve时，开发服务器将浏览器资源编译为压缩文件：

[ng] - Generating browser application bundles (phase: setup)...
[ng] ✔ Browser application bundle generation complete.
[ng] Initial Chunk Files   | Names                                              |  Raw Size | Estimated Transfer Size
[ng] main.js               | main                                               |   6.36 MB |                 1.53 MB
[ng] polyfills.js          | polyfills                                          | 161.60 kB |                41.87 kB
[ng] styles.css, styles.js | styles                                             | 145.42 kB |                32.80 kB
[ng] runtime.js            | runtime                                            |   3.52 kB |                 1.64 kB

这导致浏览器中出现异常时，回溯仅指向main.js，无法定位到实际的.ts文件位置，而Ionic 5中可以直接看到具体文件的报错信息。

另外，文件更新后的构建时间过长，约2分钟：

[ng] Build at: 2022-07-29T08:04:04.378Z - Hash: fb8b64f788964cf9 - Time: 126572ms

项目angular.json中app.architect.build配置如下：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "www",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "assets": [{
        "glob": "**/*",
        "input": "src/assets",
        "output": "assets"
      },
      {
        "glob": "**/*.svg",
        "input": "node_modules/ionicons/dist/ionicons/svg",
        "output": "./svg"
      }
    ],
    "styles": [{
        "input": "src/theme/variables.scss",
        "inject": true
      },
      {
        "input": "src/global.scss",
        "inject": true
      }
    ],
    "scripts": []
  },
  "configurations": {
    "production": {
      "fileReplacements": [{
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [{
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "7mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb"
        }
      ]
    },
    "ci": {
      "budgets": [{
        "type": "anyComponentStyle",
        "maximumWarning": "6kb"
      }],
      "progress": false
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "app:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    },
    "ci": {
      "progress": false
    }
  }
},

解决方案 #

1. 恢复.ts文件级别的报错回溯信息 #

问题根源是开发环境未生成source map文件，导致浏览器无法映射压缩后的JS到原始TS文件。需在angular.json的build.options中添加sourceMap配置：

"build": {
  "options": {
    // ... 保留原有配置
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    }
  }
}

添加后重新运行ionic serve，浏览器开发者工具即可直接显示异常对应的TS文件和行号。

2. 加快开发环境的构建速度 #

当前开发环境默认使用基础build配置，可能隐式启用了AOT编译，大幅增加构建时间。可通过以下调整优化：

（1）禁用AOT编译

在build.options中添加aot: false，开发环境改用JIT模式：

"build": {
  "options": {
    // ... 保留原有配置
    "aot": false
  }
}

（2）禁用代码优化

开发环境无需压缩优化代码，添加optimization: false：

"build": {
  "options": {
    // ... 保留原有配置
    "optimization": false
  }
}

（3）启用namedChunks

将namedChunks: true添加到build.options中，构建时生成命名代码块，增量构建仅更新修改部分：

"build": {
  "options": {
    // ... 保留原有配置
    "namedChunks": true
  }
}

（4）配置专属开发环境（可选）

若上述调整后仍有问题，可新增development配置项，让serve直接调用：

"build": {
  "configurations": {
    // ... 保留原有production、ci配置
    "development": {
      "optimization": false,
      "sourceMap": true,
      "aot": false,
      "namedChunks": true
    }
  }
},
"serve": {
  "options": {
    "browserTarget": "app:build:development"
  }
}

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