React+Vite项目AWS流水线报错：'use client'被忽略致内存溢出

1. 修正"use client"指令的使用方式 #

"use client"必须放在文件的最顶部，不能有任何前置代码、注释甚至空行，否则Vite打包时会忽略该指令，进而引发后续的内存溢出问题。检查所有使用该指令的文件，确保格式正确：

'use client';
import React from 'react';
// 后续业务代码

如果是第三方依赖中存在错误使用"use client"的情况，优先尝试升级依赖版本；若无法升级，可使用patch-package工具修改依赖源码，修正指令位置。

2. 调整Node.js内存限制 #

AWS流水线的构建容器默认内存配额可能不足以支撑大型项目的打包，直接在构建脚本中增加Node.js的内存上限：
修改package.json中的build命令：

"scripts": {
  "build": "NODE_OPTIONS='--max-old-space-size=8192' vite build"
}

数值根据容器可用内存调整，比如4096对应4GB、8192对应8GB，确保不超过容器的内存上限。

3. 优化Vite构建配置 #

启用代码分割 #

通过Rollup配置拆分打包chunk，减少单个chunk的体积，降低内存占用：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          vendor: ['axios', 'lodash'] // 根据你的项目依赖自定义拆分
        }
      }
    }
  }
});

强化Tree Shaking效果 #

确保项目依赖均为ES模块格式（避免CommonJS模块），Vite默认开启Tree Shaking，可自动移除未使用的代码，减少打包体积和内存消耗。

4. 优化AWS流水线构建环境 #

• 确保构建容器使用的Node.js版本与本地开发环境一致，版本差异可能导致打包逻辑异常。
• 在AWS CodeBuild配置中升级实例类型，比如从BUILD_GENERAL1_SMALL改为BUILD_GENERAL1_LARGE，获取更多内存资源。

5. 清理冗余依赖 #

• 使用npm list或pnpm ls分析项目依赖树，移除未使用的依赖包。
• 替换体积过大的依赖为轻量替代方案，比如用date-fns替代moment.js，减少打包时的内存压力。

内容的提问来源于stack exchange，提问作者Matheus Castro