Webpack 升级后 AzureDevOps 构建管道花费的时间太长（超过一小时）

Question

我加入了一个具有 ci/cd 管道的项目，最近我对一些依赖项进行了一些更新/升级，特别是 webpack 版本从“webpack”：“^4.46.0”到“webpack”：“^5.70.0”，也现在，当我们运行管道构建时，我将管道上的节点js版本从14.X升级到18.X，大约需要一个多小时，然后取消。应用程序本身并不是那么大，下面你可以看到我的 YAML 文件：

trigger:
- none

pool:
  name: Hosted Windows 2019 with VS2019
  vmImage: 'ubuntu-latest'
  demands: azureps

variables:
  ${{ if or(eq(variables['Build.SourceBranchName'], 'develop'),eq(variables['Build.SourceBranchName'], 'azure-pipelines')) }}:
    storageURL: lexoraddindevsa.z6.web.core.windows.net 
    appGuid: 7de764a0-e61c-11eb-ba80-0242ac130004
    appRegGuid: 28254f25-d791-4179-a261-4c8f031f3b49
    envFullName: development
    envSuffix: -dev
    envShortName: dev 
    adApiId: d2084f28-adce-45d7-8115-21b2803062cb
  ${{ if eq(variables['Build.SourceBranchName'], 'staging') }}:
    storageURL: lexoraddinstagingsa.z6.web.core.windows.net
    appGuid: 8715d99e-e61c-11eb-ba80-0242ac130004
    appRegGuid: 28254f25-d791-4179-a261-4c8f031f3b49
    envFullName: staging 
    envSuffix: -staging
    envShortName: staging 
    adApiId: 259bf3d0-bc44-4444-a9e6-bda02b410cc9
  ${{ if eq(variables['Build.SourceBranchName'], 'main') }}:
    storageURL: lexoraddinprodsa.z6.web.core.windows.net
    appGuid: 8dda6894-e61c-11eb-ba80-0242ac130004
    appRegGuid: 28254f25-d791-4179-a261-4c8f031f3b49
    envFullName: production 
    envSuffix: 
    envShortName: prod 
    adApiId: 5ff6cf61-90f2-4629-9eb9-220bf9b10d8f

stages:
- stage: Build
  jobs:
  - job: BuildOfficeAddin
    steps:
      - task: PowerShell@2
        displayName: 'manifest storage URL replace'
        inputs:
          targetType: 'inline'
          script: '((Get-Content manifest.xml.template -Raw) -replace ''%STORAGE_URL%'',''$(storageURL)'') | Set-Content manifest.$(envFullName).xml'
      - task: PowerShell@2
        displayName: 'manifest app registration replace'
        inputs:
          targetType: 'inline'
          script: '((Get-Content manifest.$(envFullName).xml -Raw) -replace ''%APP_REGISTRATION_ID%'',''$(appRegGuid)'') | Set-Content manifest.$(envFullName).xml'
      - task: PowerShell@2
        displayName: 'manifest app guid replace'
        inputs:
          targetType: 'inline'
          script: '((Get-Content manifest.$(envFullName).xml -Raw) -replace ''%APP_GUID%'',''$(appGuid)'') | Set-Content manifest.$(envFullName).xml'
      - task: PowerShell@2
        displayName: 'manifest app name replace'
        inputs:
          targetType: 'inline'
          script: '((Get-Content manifest.$(envFullName).xml -Raw) -replace ''%APP_NAME%'',''$(envSuffix)'') | Set-Content manifest.$(envFullName).xml'
      - task: PowerShell@2
        displayName: 'manifest env shortName replace'
        inputs:
          targetType: 'inline'
          script: '((Get-Content manifest.$(envFullName).xml -Raw) -replace ''%ENV_SHORTNAME%'',''$(envShortName)'') | Set-Content manifest.$(envFullName).xml'
      - task: PowerShell@2
        displayName: '.env storage URL replace'
        inputs:
          targetType: 'inline'
          script: '((Get-Content .env.template -Raw) -replace ''%STORAGE_URL%'',''$(storageURL)'') | Set-Content .env.$(envFullName)'
      - task: PowerShell@2
        displayName: '.env for $(envFullName)'
        inputs:
          targetType: 'inline'
          script: '(((((Get-Content .env.$(envFullName) -Raw) -replace ''%REACT_APP_ENV%'',''$(envFullName)'') -replace ''%API_URL%'',''https://api$(envSuffix).lexor.be'') -replace ''%B2CDOMAIN%'',''flexsoftlexor$(envShortName)'') -replace ''%ACTIVE_DIRECTORY_API_ID%'',''$(adApiId)'') | Set-Content .env.$(envFullName)'
      - task: NodeTool@0
        displayName: 'Use Node 18.x'
        inputs:
          versionSpec: 18.x
      - task: Npm@1
        displayName: 'npm install'
        inputs:
          verbose: false
      - task: Npm@1
        displayName: 'npm run validate manifest.$(envFullName).xml'
        inputs:
          verbose: false
      - task: Npm@1
        displayName: 'npm run build'
        inputs:
          command: custom
          verbose: false
          customCommand: 'run build:$(envFullName)'
      - task: CopyFiles@2
        displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
        inputs:
          SourceFolder: '$(Build.SourcesDirectory)/dist'
          TargetFolder: '$(Build.ArtifactStagingDirectory)'
      - task: CopyFiles@2
        displayName: 'Copy Assets to: $(Build.ArtifactStagingDirectory)'
        inputs:
          SourceFolder: '$(Build.SourcesDirectory)/assets'
          TargetFolder: '$(Build.ArtifactStagingDirectory)/assets'
      - task: ArchiveFiles@2
        displayName: 'Archive $(Build.BinariesDirectory)'
      - task: PublishBuildArtifacts@1
        displayName: 'Publish Artifact: drop'

这是我的 package.json :

{
  "name": "office-addin-taskpane-react",
  "version": "0.0.1",
  "repository": {
    "type": "git",
  },
  "license": "MIT",
  "config": {
    "app_to_debug": "word",
    "app_type_to_debug": "desktop",
    "dev_server_port": 3000
  },
  "scripts": {
    "init": "npm run init:env && npm run lingui:compile",
    "init:env": "cp .env.template .env.development",
    "build:development": "webpack --config webpack.config.js --env TARGET_ENV=development  --env HTTPS=true",
    "build:staging": "webpack --config webpack.config.js --env TARGET_ENV=staging --env HTTPS=true",
    "build:production": "webpack -p --config webpack.config.js --env TARGET_ENV=production  --env HTTPS=true",
    "convert-to-single-host": "node convertToSingleHost.js",
    "configure-sso": "office-addin-sso configure manifest.xml",
    "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.",
    "dev": "webpack-dev-server --env TARGET_ENV=development",
    "lint": "office-addin-lint check",
    "lint:fix": "office-addin-lint fix",
    "prettier": "office-addin-lint prettier",
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:web": "office-addin-debugging start manifest.xml web",
    "start:server": "office-addin-sso start manifest.xml",
    "stop": "office-addin-debugging stop manifest.xml",
    "validate": "office-addin-manifest validate",
    "watch": "webpack --mode development --watch",
    "modules:install": "npm i --legacy-peer-deps",
    "modules:reset": "rm -rf ./node_modules && npm i",
    "modules:update": "./node_modules/.bin/npm-check --update",
    "lingui:extract": "lingui extract --clean",
    "lingui:compile": "lingui compile",
    "lingui:all": "npm run lingui:extract && npm run lingui:compile"
  },
  "dependencies": {
    "@apollo/client": "^3.6.6",
    "@azure/msal-node": "^2.6.5",
    "@fluentui/react": "^8.70.0",
    "@hot-loader/react-dom": "^17.0.2",
    "@lingui/core": "^3.10.4",
    "@lingui/macro": "^3.10.2",
    "@lingui/react": "^3.10.2",
    "@microsoft/applicationinsights-react-js": "^3.1.4",
    "@microsoft/applicationinsights-web": "^2.6.4",
    "@popperjs/core": "^2.9.2",
    "@testing-library/react": "^12.0.0",
    "apollo-link-error": "^1.1.13",
    "common-tags": "^1.8.0",
    "core-js": "^3.22.7",
    "date-fns": "^2.22.1",
    "dot-prop-immutable": "^2.1.0",
    "dotenv": "^10.0.0",
    "es6-promise": "^4.2.8",
    "framer-motion": "^6.2.8",
    "graphql": "^16.0.0",
    "jwt-decode": "^3.1.2",
    "localforage": "^1.9.0",
    "localforage-memoryStorageDriver": "^0.9.2",
    "lodash.clonedeep": "^4.5.0",
    "make-plural": "^6.2.2",
    "mocha": "^8.2.1",
    "msal": "^1.3.2",
    "node-fetch": "^2.6.1",
    "query-string": "^7.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-ga": "^3.3.0",
    "react-input-mask": "^2.0.4",
    "react-popper": "^2.2.5",
    "react-router-dom": "^5.2.0",
    "react-select": "^4.3.1",
    "react-sortable-hoc": "^2.0.0",
    "regenerator-runtime": "^0.13.7",
    "round-to": "^5.0.0",
    "styled-components": "^5.3.0",
    "use-deep-compare-effect": "^1.6.1",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.18.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-transform-arrow-functions": "^7.14.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.6.3",
    "@dashdot/eslint-config-react": "^0.2.0",
    "@lingui/cli": "^3.10.2",
    "apollo-link-context": "^1.0.20",
    "babel-loader": "^8.2.2",
    "babel-plugin-styled-components": "^2.1.4",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^12.0.2",
    "css-loader": "^6.10.0",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-office-addins": "^0.3.1",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^4.1.0",
    "file-loader": "^6.2.0",
    "find-process": "^1.4.4",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.1",
    "less": "^3.9.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.8.1",
    "npm-check": "^5.9.2",
    "office-addin-cli": "^1.5.9",
    "office-addin-debugging": "^4.3.14",
    "office-addin-dev-certs": "^1.12.2",
    "office-addin-lint": "^2.2.9",
    "office-addin-manifest": "^1.8.1",
    "office-addin-prettier-config": "^1.2.0",
    "postcss": "^8.4.38",
    "postcss-loader": "^8.1.1",
    "react-hot-loader": "^4.13.0",
    "source-map-loader": "^5.0.0",
    "style-loader": "^3.3.4",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "prettier": "office-addin-prettier-config"
}

另请看一下特定步骤时间的图片：

我尝试了 vmImage: 'ubuntu-latest' 和 vmImage: 'macos-latest' 但这并不能解决问题，而且在我的本地计算机中构建也没有问题

Answer 1

我使用 Npm@1 任务进行了测试，并且可以重现“

npm run build

”或“

npm run test

”命令卡住并且最终因超时而被取消的类似问题。

但是，当我在管道中尝试时，以下两种方法可以正常工作：

• 使用 CmdLine@2 任务运行

  npm

  命令。

  - script: 'npm run build'
    displayName: 'npm run build'
  

• 使用 Npm@0 任务运行

  npm

  命令。

  - task: Npm@0
    displayName: 'npm run build'
    inputs:
      command: run
      arguments: build
  

看起来，Npm@1 任务存在问题。作为解决方法，您可以尝试使用 CmdLine@2 或 Npm@0 任务来运行

npm

命令。

---