Vite build in docker with WSL2 integration is extremely slow

I'm having a hard time understanding the root cause of Vite build poor performance inside of a docker image that I hope for some guidance here.

Running vite build locally versus inside of a docker has drastic performance differences.

Context

// package.json
{
  "scripts": {
    "build": "tsc && vite build -l info -d",
  }
}

Running build on a local machine is fast and finishes in 7seconds

Versus logs from a docker image (failed after ~7mins):

In the end, getting the out of memory exception:

    <--- Last few GCs --->
    
    [17:0x7f00f56d5690]   382491 ms: Scavenge 4002.5 (4127.4) -> 3990.8 (4128.9) MB, 15.96 / 0.00 ms  (average mu = 0.123, current mu = 0.030) allocation failure;
    [17:0x7f00f56d5690]   385497 ms: Mark-Compact 4004.5 (4128.9) -> 3983.8 (4131.1) MB, 2789.26 / 0.00 ms  (average mu = 0.249, current mu = 0.369) allocation failure; scavenge might not succeed
    
    
    <--- JS stacktrace --->
    
    FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
    ----- Native stack trace -----
    npm error path /
    npm error command failed
    npm error signal SIGABRT
    npm error command sh -c tsc && vite build -l info -d --profile
    
    npm error A complete log of this run can be found in: /root/.npm/_logs/2024-10-04T08_13_20_026Z-debug-0.log

Notice the vite:transform and vite:load steps, jumping from ms to ~60sec + ~37sec.

There's nothing special with dockerfile:

FROM node:20.15.1-alpine AS build
ENV GENERATE_SOURCEMAP=false
ENV NODE_OPTIONS=--max-old-space-size=4096

COPY package*.json .

RUN npm install

COPY . .

RUN npm run build

FROM node:20.15.1-alpine

RUN npm i -g serve

COPY --from=build ./dist ./dist

EXPOSE 3000

CMD [ "serve", "-s", "dist" ]

For vite config:

export default defineConfig(() => ({
  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
  plugins: [
    react(),
    vanillaExtractPlugin(),
    consulSelfRegister({ name: 'personal-finances-frontend' })
  ],
  test: {
    globals: true,
    coverage: {
      provider: 'c8',
      reporter: ['text', 'json', 'html']
    }
  },
  preview: {
    port: 5173,
    strictPort: true
  },
  server: {
    port: 5173,
    strictPort: true,
    host: true,
    origin: 'http://127.0.0.1:5173'
  }
}));

I'm building with docker for windows and WSL2 integration.

Findings

I found that commenting vanillaExtractPlugin() in vite config - solves the issue and build drops to mere 12sec, but for some reason did not produce debug logs - not sure why?

Package versions used:

"@vanilla-extract/css": "^1.16.0",
"@vanilla-extract/vite-plugin": "^4.0.16",

Help needed

So from this point, I'm kinda stuck - is there something that I could check/debug to nail down the root cause of the problem to try and attack it?

Workaround

It seems that there was something strange with the vanilla extract plugin version, - reverting to 3.9.5 resolved the issue ...

This github issue helped me out: https://github.com/vanilla-extract-css/vanilla-extract/issues/1408

I've found a reference to similar problems in vanilla extract github: https://github.com/vanilla-extract-css/vanilla-extract/issues/1408

Reverting version to "@vanilla-extract/vite-plugin": "3.9.5" resolved the issue.

But why it was only an issue from within the docker - is still a mystery.