Cut Docker Build Time for Frontend Projects by Up to 14× with a Cached Image

Overview

When building Docker images for a frontend project, the docker build step often dominates the total time, especially when downloading node modules, which can take ten minutes and severely reduce release efficiency.

Solution

The common remedy is to create a custom image based on the official node image that pre‑installs all required packages, then use that image for the actual compilation.

Before modification

Originally the frontend was compiled inside a node image and the resulting static files were copied into a backend container.

FROM node:10.15-alpine as front-builder

WORKDIR /user
ADD ./frontend/application .
RUN yarn                        # longest step
RUN yarn build


FROM golang:1.12.5-alpine3.9 as back-builder

WORKDIR /go
RUN mkdir -p ./src/xxx
ADD ./backend/src/xxx ./src/xxx
RUN go install xxx


FROM golang:1.12.5-alpine3.9

WORKDIR /app
COPY --from=front-builder /user/build ./public
COPY --from=back-builder /go/bin/xxx .
CMD ["./xxx"]

The build time was:

real    14m27.639s
user    0m0.812s
sys     0m0.108s

Cache image for frontend

A lightweight Dockerfile that only installs node modules is used to produce an image named node-application-cache:

FROM node:10.15-alpine

WORKDIR /user
ADD ./frontend/application .
RUN yarn
RUN rm -rf `grep -v "node_modules" | grep -v "yarn.lock"`

Build the image:

# docker build -f ./Dockerfile -t node-application-cache .

After modification

The front‑builder stage now uses the cached image:

# FROM node:10.15-alpine as front-builder
FROM node-application-cache:latest as front-builder

Resulting build time:

real    1m17.399s
user    0m0.836s
sys     0m0.136s

Using the pre‑populated cache reduces the total build time by roughly fourteenfold while keeping the final runtime image size unchanged.