NextJS TypeScript应用构建时JavaScript堆内存不足问题求助

我有一个包含30个页面及若干依赖的NextJS TypeScript应用，尝试在仅配备512MB内存的免费实例上执行构建操作，但有时甚至无法完成类型校验步骤，出现如下报错：

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

以下是我的package.json内容：

{"name": "app","scripts": {"dev": "next dev","build": "NODE_OPTIONS=\" --max-old-space-size=512\"  next build","prestart": "npm run build","start": "NODE_OPTIONS=\"--max-old-space-size=512\" next start","test": "start-server-and-test dev 3000 cypress:open","type:check": "yarn tsc --project tsconfig.json --pretty --noEmit","prepare": "husky install"},"dependencies": {"@fortawesome/fontawesome-svg-core": "^1.3.0","@fortawesome/free-regular-svg-icons": "^6.0.0","@fortawesome/free-solid-svg-icons": "^6.0.0","@fortawesome/react-fontawesome": "^0.1.17","@lexical/react": "^0.7.1","@reduxjs/toolkit": "^1.7.2","@tangdw/react-viewer": "^3.2.7","antd": "^4.18.8","antd-dayjs-webpack-plugin": "^1.0.6","autoprefixer": "^10.4.7","bootstrap": "5.1.3","country-list": "^2.2.0","draft-js": "^0.11.7","draftjs-to-html": "^0.9.1","formik": "^2.2.9","formik-antd": "^2.0.4","html-to-draftjs": "^1.5.0","jsonwebtoken": "^8.5.1","jwt-decode": "^3.1.2","lodash": "^4.17.21","moment": "^2.29.1","next": "12.0.10","next-pwa": "^5.6.0","nprogress": "^0.2.0","postcss": "^8.4.14","query-string": "^7.1.1","react": "17.0.2","react-dom": "17.0.2","react-draft-wysiwyg": "^1.15.0","react-feather": "^2.0.10","react-icons": "^4.3.1","react-multi-carousel": "^2.8.0","react-redux": "^7.2.6","react-share": "^4.4.1","react-show-more-text": "^1.5.2","react-slick": "^0.29.0","react-typical": "^0.1.3","react-viewer": "^3.2.2","tailwindcss": "^3.0.24","yup": "^0.32.11"},"devDependencies": {"@types/node": "17.0.15","@types/react": "17.0.39","@types/react-show-more-text": "^1.4.2","@typescript-eslint/eslint-plugin": "^5.11.0","@typescript-eslint/parser": "^5.11.0","@types/jsonwebtoken": "^8.5.8","@types/nprogress": "^0.2.0","@types/react-typical": "^0.1.0","cypress": "^9.5.1","eslint": "8.8.0","eslint-config-next": "12.0.10","eslint-config-prettier": "^8.3.0","eslint-plugin-jsx-a11y": "^6.5.1","eslint-plugin-prettier": "^4.0.0","eslint-plugin-react": "^7.28.0","eslint-plugin-react-hooks": "^4.3.0","husky": ">=6","lint-staged": ">=10","miragejs": "^0.1.43","prettier": "2.5.1","start-server-and-test": "^1.14.0","typescript": "4.5.5"},}

请问是否有可行的解决办法？

1. 优化TypeScript类型校验内存占用 #

修改type:check脚本，关闭第三方库类型校验并禁用增量编译，大幅降低内存消耗：

"type:check": "tsc --project tsconfig.json --noEmit --skipLibCheck --incremental false"

• --skipLibCheck：跳过node_modules中第三方库的类型校验，避免无意义的内存开销
• --incremental false：禁用增量编译缓存，减少额外内存占用

2. 调整Node内存限制与构建参数 #

当前设置的max-old-space-size=512完全占用实例内存，需预留部分空间给系统进程，同时开启Next.js增量构建：

• 调整内存限制：

  "build": "NODE_OPTIONS=\"--max-old-space-size=400\" next build",
  "start": "NODE_OPTIONS=\"--max-old-space-size=400\" next start"
  

• 在next.config.js中启用增量构建（Next.js 12+支持）：

  module.exports = {
    experimental: {
      incrementalBuild: true
    }
  };
  

3. 精简依赖与代码体积 #

• 清理冗余依赖：比如你同时安装了react-viewer和@tangdw/react-viewer，保留一个即可；用npm ls排查未使用的依赖并删除
• Ant Design按需加载：配置babel-plugin-import实现组件按需引入，避免全量打包
• 组件懒加载：使用next/dynamic对大型组件或页面做动态导入，分散构建时的内存压力

4. 系统级内存优化 #

• 关闭无关进程：构建前停止实例上的日志、监控等非必要服务，释放内存
• 创建临时交换空间：用磁盘空间补充物理内存，命令示例：

  sudo fallocate -l 1G /swapfile
  sudo chmod 600 /swapfile
  sudo mkswap /swapfile
  sudo swapon /swapfile
  

  构建完成后可执行sudo swapoff /swapfile关闭交换空间

5. 拆分构建步骤 #

将类型校验和构建分开执行，避免高内存任务同时运行：

"scripts": {
  "build": "NODE_OPTIONS=\"--max-old-space-size=400\" next build",
  "type:check": "NODE_OPTIONS=\"--max-old-space-size=300\" tsc --project tsconfig.json --noEmit --skipLibCheck",
  "full-build": "npm run type:check && npm run build"
}

先完成类型校验，再执行构建，降低内存峰值

内容的提问来源于stack exchange，提问作者Sostene MUNEZERO BAGIRA