Hey there! Let's fix that slow npm build time — caching is exactly the right move here, and you don't need to remove the npm install steps entirely. Instead, we'll add caching for your node_modules folders so npm only re-downloads dependencies when your package-lock.json (or yarn.lock, if you use yarn) changes. Here's how to update your Azure DevOps YAML pipeline:

Modified YAML with NPM Caching #

trigger:
  - development
pool:
  vmImage: 'windows-latest'
variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Test'
steps:
- task: NuGetToolInstaller@1
- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'

# Cache frontend node_modules
- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | frontend/package-lock.json'
    path: 'frontend/node_modules'
  displayName: 'Cache frontend npm dependencies'

- task: Npm@1
  inputs:
    command: 'install'
    workingDir: 'frontend'
- task: Npm@1
  inputs:
    command: 'custom'
    workingDir: 'frontend'
    customCommand: 'run build-test'

# Cache admin-frontend node_modules
- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | admin-frontend/package-lock.json'
    path: 'admin-frontend/node_modules'
  displayName: 'Cache admin-frontend npm dependencies'

- task: Npm@1
  inputs:
    command: 'install'
    workingDir: 'admin-frontend'
- task: Npm@1
  inputs:
    command: 'custom'
    workingDir: 'admin-frontend'
    customCommand: 'run build-test'

- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:DesktopBuildPackageLocation="$(build.artifactStagingDirectory)\WebApp.zip" /p:DeployIisAppPath="Default Web Site"'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'
    msbuildArchitecture: 'x64'
    createLogFile: true
    logFileVerbosity: 'diagnostic' # Consider changing to 'normal' if not debugging builds
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: '$(Pipeline.Workspace)'
    artifact: 'Web-Project-Test'

Key Explanations: #

1. Why Keep npm install?
   Caching just reuses existing downloaded dependencies. If your package-lock.json changes (e.g., you add/update a package), npm install will still run to sync your dependencies — this is necessary to keep your build consistent. The cache just skips re-downloading unchanged packages.

2. How the Cache@2 Task Works

   • The key uses the OS type and your package-lock.json file hash. This ensures the cache only invalidates when you modify your dependency list or switch build OS.
   • The path points to the node_modules folder we want to cache. If the cache exists, it's restored before running npm install; if not, npm install runs normally, and the new node_modules is saved to the cache for future builds.

Extra Optimization Tips: #

• Parallelize Frontend/Admin Builds: If your frontend and admin-frontend builds don't depend on each other, you can run them in parallel using parallel steps to cut down total time further.
• Adjust Log Verbosity: Your VSBuild task uses diagnostic log verbosity, which generates a lot of output. If you're not actively debugging build issues, switch this to normal to reduce log-writing overhead.
• Use Latest NPM Version: Add a step to ensure you're using the latest stable npm version (e.g., npm install -g npm@latest) before running npm install — newer versions often have performance improvements for dependency installation.

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