How we did to reduce 95% bundle (docker, container) size of a Nuxt 3 (rc8) app

To be honest, I am a newbie to Nuxt 3, so, any comments are welcome.

Last week (2022/08/30), I noticed that my members are using Nuxt 3 and the bundle size was tremendous. Therefore, I want to reduce the size by using the multi-stage method and using node:alpine. 

Spoiler: You can check out the result below by size before (2.88GB) and after (131MB).

REPOSITORY          TAG           IMAGE ID       CREATED          SIZE
myapp              v1.0.2        5ffd6627a861   12 seconds ago   131MB
myapp              v1.0.1        ef13e87402c4   20 hours ago     2.88GB

Once you started your app with Nuxt 3, now you can use the Dockerfile below and put it in the project's root directory (or any path you like) to build your docker image.

WARN: You need to make sure that your app is compatible with node:alpine.

 

The Dockerfile:

FROM node:16.17.0 AS base

#### multi-stage: builder
FROM base AS builder

RUN mkdir -p /src
COPY . /src
WORKDIR /src

# config/.env should be mounted or replace with config/.env.example
RUN ["cp", "/src/config/.env.example", "/src/config/.env"]

RUN yarn install
RUN yarn build

#### multi-stage: runner
FROM node:16.17.0-alpine3.16

WORKDIR /app

COPY --from=builder /src/.output /app/.output
COPY --from=builder /src/nuxt.config.ts /app/
COPY --from=builder /src/public /app/

COPY --from=builder /src/config /app/
COPY --from=builder /src/.env /app/

EXPOSE 3000
CMD source .env ; node /app/.output/server/index.mjs

NOTE1: I also did some tricks for runtimeConfig in the file, if you don't need it, remove it and revise it to your version.