Webpack, Azure Pipelines & Caching — build your Frontend in seconds

Today I picked a ticket, where it said try to improve our build speed in Azure DevOps / Azure Pipelines. Well the webpack step in our pipeline took almost 4 minutes — Now it’s time to improve I thought!

In the end thanks to the caching task in Azure Pipelines , I reduced the build time to 18secs — when no Typescript was changed.

How did you archive this speed?

First of all I read the article about caching in azure pipelines:

Pipeline caching - Azure Pipelines

Then I thought, well I can cache every folder just by giving the cache a source file as a key. What would happen, if I could cache the webpack cache. Is it possible to create a file based cache in webpack? It is! So let’s get to the code!

Enabling filesystem based caching in webpack:

The webpack config has a cache object which you can easily set to filesystem based caching.

const path = require('path');
module.exports = {
entry: entryPoints,
devtool: 'source-map',
cache: {
  type: 'filesystem',
  cacheDirectory: path.resolve('./.webpack_cache'),
},
...
}

Cache | webpack

Tweaking the azure pipeline

Cache your npm packages and the webpack cache for a faster build!

See Azure Devops recommendation how to cache npm packages in the docs above. I’ve added the cache task and the variable to the yaml below as well.

Cache your filesystem cache from webpack.

Use an additional Cache task and configure it like this:

Key — points to your webpack.config.js — the file will be hashed, so if you change your webpack config file — your cache gets whiped.

RestoreKeys — give the cache a senseful name

Path — should point to your project folder and there to the new subfolder .webpack_cache.

That’s all all your upcomming builds will now restore your webpack cache and also your npm packages and speed up your build as long as you don’t change webpack.config.js! Then the next build will be slow again, all others will reuse the cache then.

variables:
- name: npm_config_cache
  value: $(Pipeline.Workspace)/.npm
stages:
- stage: Build
  displayName: Build
  jobs:
  - job: Build
    displayName: Build
    workspace:
    clean: all
    steps:
    ...
     - task: Cache@2
       inputs:
        key: 'npm | "$(Agent.OS)" | $(Build.SourcesDirectory)/**/package-lock.json'
        restoreKeys: npm | "$(Agent.OS)"
        path: $(npm_config_cache)
      displayName: Cache npm
   - task: Cache@2
     inputs:
       key: 'webpack | "$(Agent.OS)" | $(Build.SourcesDirectory)/**/webpack.config.js'
       restoreKeys: webpack | "$(Agent.OS)"
       path: $(Build.SourcesDirectory)/PATHTOPROJECT/.webpack_cache
     displayName: Cache webpack
...
Build your Frontend and Backend here

Additional tweaks, I’ve done in our project, based on the performance recommendations from the webpack project. For details check the link at the bottom.

TS-Loader: config,

Output: pathinfo,

Resolve: Symlinks,

Optimization: Minortweaks

plugins: [
  new ForkTsCheckerWebpackPlugin(),
],
...
module: {
rules: [
{
  test: /\.ts$/,
  exclude: /node_modules/,
    use: {
      loader: 'ts-loader',
      options: {
       transpileOnly: true,
       happyPackMode: true
     }
  }
},
output: {
  pathinfo: false,
},
optimization: {
  runtimeChunk: true,
  removeAvailableModules: false,
  removeEmptyChunks: false,
},
resolve: {
  symlinks: false,
}
...

You can find several webpack build performance tweaks here:

Build Performance | webpack

Have fun optimizing your webpack performance in Azure pipelines!