使用 WSL2 集成在 docker 中构建 Vite 非常慢

Question

我很难理解 Vite 在 docker 镜像中构建性能不佳的根本原因，希望在这里得到一些指导。

在本地运行 vite 构建与在 docker 内部运行 vite 构建具有巨大的性能差异。

背景

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

在本地机器上运行

build

速度很快，7秒内完成

与 docker 镜像中的日志相比（约 7 分钟后失败）：

最后，得到内存不足异常：

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

注意

vite:transform

和

vite:load

步骤，从毫秒跳到 ~60 秒 + ~37 秒。

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" ]

对于 vite 配置：

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'
  }
}));

我正在使用 docker for windows 和 WSL2 集成进行构建。

调查结果

我发现在 vite 配置中注释

vanillaExtractPlugin()

- 解决了问题并且构建下降到仅仅

12sec

，但由于某种原因没有生成调试日志 - 不知道为什么？

使用的软件包版本：

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

需要帮助

所以从这一点来看，我有点陷入困境 - 有什么我可以检查/调试的东西来确定问题的根本原因并尝试解决它吗？

解决方法

香草提取物插件版本似乎有些奇怪，-恢复到 3.9.5 解决了问题...

这个 github 问题帮助了我： https://github.com/vanilla-extract-css/vanilla-extract/issues/1408

Answer 1

我在 vanilla extract github 中找到了类似问题的参考：https://github.com/vanilla-extract-css/vanilla-extract/issues/1408

将版本恢复到

"@vanilla-extract/vite-plugin": "3.9.5"

解决了问题。

但是为什么这只是 docker 内部的问题 - 仍然是个谜。