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).

  1. REPOSITORY TAG IMAGE ID CREATED SIZE
  2. myapp v1.0.2 5ffd6627a861 12 seconds ago 131MB
  3. 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:
  1. FROM node:16.17.0 AS base
  2. #### multi-stage: builder
  3. FROM base AS builder
  4. RUN mkdir -p /src
  5. COPY . /src
  6. WORKDIR /src
  7. # config/.env should be mounted or replace with config/.env.example
  8. RUN ["cp", "/src/config/.env.example", "/src/config/.env"]
  9. RUN yarn install
  10. RUN yarn build
  11. #### multi-stage: runner
  12. FROM node:16.17.0-alpine3.16
  13. WORKDIR /app
  14. COPY --from=builder /src/.output /app/.output
  15. COPY --from=builder /src/nuxt.config.ts /app/
  16. COPY --from=builder /src/public /app/
  17. COPY --from=builder /src/config /app/
  18. COPY --from=builder /src/.env /app/
  19. EXPOSE 3000
  20. 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.