升级Webpack和Node.js后Azure DevOps构建流水线耗时超1小时

问题背景 #

将项目Webpack版本从^4.46.0升级至^5.70.0，同时把Azure DevOps流水线的Node.js版本从14.X切换到18.X后，流水线构建耗时超1小时被取消，但本地构建无异常。更换vmImage为ubuntu-latest和macos-latest后问题依旧。

排查方向与解决方案 #

1. 禁用Webpack持久化缓存 #

Webpack 5默认开启磁盘持久化缓存，但CI环境每次都是全新实例，缓存无法复用反而会额外消耗IO资源。修改Webpack配置，改用内存缓存或直接禁用：

module.exports = {
  cache: {
    type: 'memory' // 或设置为 false 完全禁用缓存
  }
};

2. 优化依赖安装步骤 #

• 使用npm ci替代npm install：npm ci严格按照package-lock.json安装依赖，速度更快且避免版本不一致问题。修改流水线任务：

- task: Npm@1
  displayName: 'npm ci'
  inputs:
    command: custom
    customCommand: 'ci'
    verbose: false

• 启用npm依赖缓存：添加Azure DevOps缓存任务，避免每次构建重复下载依赖：

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    restoreKeys: |
       npm | "$(Agent.OS)"
    path: $(npm_config_cache)
  displayName: 缓存npm依赖

3. 修复Webpack插件兼容性问题 #

当前使用的html-webpack-plugin@4.5.1与Webpack 5兼容性较差，建议升级至兼容版本：

// package.json devDependencies中修改
"html-webpack-plugin": "^5.6.0"

同时检查其他Webpack相关插件（如copy-webpack-plugin、mini-css-extract-plugin等），确保版本与Webpack 5匹配。

4. 简化流水线配置 #

• 移除冲突的Pool配置：pool中同时指定name和vmImage会导致配置冲突，保留其中一个即可：

pool:
  vmImage: 'ubuntu-latest'
  demands: azureps

• 合并文件替换脚本：将多个PowerShell文件替换步骤合并为单个脚本，减少重复IO操作：

# 合并后的manifest与.env替换脚本
# 处理manifest文件
$manifestContent = Get-Content manifest.xml.template -Raw
$manifestContent = $manifestContent -replace '%STORAGE_URL%', '$(storageURL)' `
                                   -replace '%APP_REGISTRATION_ID%', '$(appRegGuid)' `
                                   -replace '%APP_GUID%', '$(appGuid)' `
                                   -replace '%APP_NAME%', '$(envSuffix)' `
                                   -replace '%ENV_SHORTNAME%', '$(envShortName)'
$manifestContent | Set-Content manifest.$(envFullName).xml

# 处理.env文件
$envContent = Get-Content .env.template -Raw
$envContent = $envContent -replace '%STORAGE_URL%', '$(storageURL)' `
                         -replace '%REACT_APP_ENV%', '$(envFullName)' `
                         -replace '%API_URL%', 'https://api$(envSuffix).lexor.be' `
                         -replace '%B2CDOMAIN%', 'flexsoftlexor$(envShortName)' `
                         -replace '%ACTIVE_DIRECTORY_API_ID%', '$(adApiId)'
$envContent | Set-Content .env.$(envFullName)

5. 定位构建瓶颈 #

开启构建日志详细模式，查看具体卡顿环节：

- task: Npm@1
  displayName: 'npm run build'
  inputs:
    command: custom
    verbose: true
    customCommand: 'run build:$(envFullName)'

6. 优化Webpack构建脚本 #

生产环境构建的-p参数在Webpack 5中已包含--mode production，无需重复配置，避免重复执行优化步骤。

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