CircleCI上ReactJs项目构建超时失败，求解决方案

问题描述 #

在CircleCI上部署React项目时，yarn build构建步骤执行失败——该步骤运行超过10分钟后无输出，最终被终止。尝试在CircleCI配置中添加no_output_timeout: 20m，还执行了echo 'timeout = 1200' >> ~/.bashrc，但问题依旧，构建还是会在10分钟后失败。

相关构建日志：

#16 [10/12] RUN yarn build --verbose
#16 0.573 yarn run v1.17.3
#16 0.597 $ GENERATE_SOURCEMAP=false craco build --verbose
#16 0.780 craco:  Project root path resolved to:  /app
#16 0.781 craco:  Config file path resolved to:  /app/craco.config.js
#16 0.810 craco:  Override started with arguments:  [ '/usr/local/bin/node',
#16 0.810   '/app/node_modules/@craco/craco/scripts/build.js',
#16 0.810   '--verbose' ]
#16 0.810 craco:  For environment:  production
#16 0.810 craco:  Found craco config file at:  /app/craco.config.js
#16 0.813 craco:  Overrided craco config with plugin.
#16 0.814 craco:  Applied craco config plugins.
#16 0.820 craco:  Found Webpack prod config at:  /app/node_modules/react-scripts/config/webpack.config.js
#16 2.550 craco:  Overrided ESLint config to enable an ignore file.
#16 2.551 craco:  Overrided PostCSS loader.
#16 2.551 craco:  Overrided PostCSS loader.
#16 2.551 craco:  Overrided PostCSS loader.
#16 2.551 craco:  Overrided PostCSS loader.
#16 2.557 craco:  Applied webpack config plugins.
#16 2.557 craco:  Overrided require cache for module: /app/node_modules/react-scripts/config/webpack.config.js
#16 2.557 craco:  Overrided Webpack prod config.
#16 2.557 craco:  Building CRA at:  /app/node_modules/react-scripts/scripts/build.js
#16 2.713 Creating an optimized production build...
#16 3.765 Browserslist: caniuse-lite is outdated. Please run:
#16 3.765 npx browserslist@latest --update-db
#16 3.765 
#16 3.765 Why you should do it regularly:
#16 3.765 https://github.com/browserslist/browserslist#browsers-data-updating
ERRO[0542] got 3 SIGTERM/SIGINTs, forcing shutdown    

解决方法 #

1. 修正no_output_timeout配置位置 #

CircleCI的no_output_timeout必须配置在具体的job步骤中，而非全局或job级别。示例配置：

jobs:
  build:
    docker:
      - image: cimg/node:20.10.0
    steps:
      - checkout
      - run:
          name: Install dependencies
          command: yarn install
      - run:
          name: Build project
          command: yarn build --verbose
          no_output_timeout: 20m  # 必须放在该run步骤下

2. 解决Webpack构建停滞问题 #

日志停留在Creating an optimized production build...，说明Webpack打包过程卡住，可从以下方向排查：

• 检查craco、react-scripts与Webpack的版本兼容性，尝试升级到稳定版本；
• 排查项目代码体积，临时禁用Terser、CSS Minimizer等优化插件，测试是否能完成构建，定位耗时模块；
• 检查项目中外部资源（字体、图片）的引用路径，确认打包时能正常加载。

3. 给Webpack添加实时进度输出 #

默认生产构建无实时进度输出，会被CircleCI判定为无输出而终止。修改craco.config.js添加进度插件：

const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.ProgressPlugin({
          handler: (percentage, message) => {
            console.log(`Build progress: ${Math.round(percentage * 100)}% - ${message}`);
          }
        })
      ]
    }
  }
};

4. 升级CircleCI资源或优化构建流程 #

若使用基础资源层，CPU/内存不足可能导致构建缓慢：

• 升级CircleCI资源等级；
• 构建前清理冗余缓存，减少并行任务数量。

5. 预更新browserslist数据 #

日志提示caniuse-lite is outdated，虽非直接原因，但可提前更新避免潜在问题，在构建步骤前添加：

npx browserslist@latest --update-db

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