Speed up Azure Devops Pipelines with npm caching

pipeline-example.yml

variables:
  npm_config_cache: $(Pipeline.Workspace)/.npm

steps:

  #shallow depth git checkout for faster checkout and artifact download speeds
  - checkout: self
    fetchDepth: 10

  - task: Cache@2
    displayName: Cache npm
    inputs:
      key: 'npm | "$(Agent.OS)" | $(Build.SourcesDirectory)/webapp/package.json, $(Build.SourcesDirectory)/webapp/npm-shrinkwrap.json'
      path: $(npm_config_cache)
      restoreKeys: |
        npm | "$(Agent.OS)"
      cacheHitVar: NPM_CACHE_RESTORED


  - task: Cache@2
    displayName: Cache webapp node_modules
    inputs:
      key: 'node_modules | "$(Agent.OS)" | $(Build.SourcesDirectory)/webapp/package.json, $(Build.SourcesDirectory)/webapp/npm-shrinkwrap.json'
      path: '$(Build.SourcesDirectory)/webapp/node_modules'
      cacheHitVar: MODULES_CACHE_RESTORED


  - task: Npm@1
    displayName: Npm Install
    inputs:
      command: 'custom'
      customCommand: 'ci'
      workingDir: '$(Build.SourcesDirectory)/webapp'
    condition: ne(variables.MODULES_CACHE_RESTORED, 'true')


  - task: Npm@1
    displayName: Npm Build
    inputs:
      command: custom
      customCommand: run build --prod
      workingDir: '$(Build.SourcesDirectory)/webapp'