VSTS执行npm build超时被取消问题咨询

我之前维护eject后的CRA项目时，也碰到过VSTS（现Azure DevOps Pipeline）构建超时的情况，结合你的场景（自定义webpack代码分割、本地构建正常但CI超时），给你几个针对性的优化方案，亲测能大幅缩短构建时间：

1. 优先优化依赖安装步骤 #

依赖安装是很多CI构建的耗时大户，先从这里下手：

• 用npm ci替代npm install：npm ci会严格按照package-lock.json安装依赖，跳过依赖版本协商，且能更好地利用缓存，比npm install快很多。
• 配置VSTS缓存：在Pipeline中添加Cache任务，缓存node_modules文件夹和npm缓存目录。示例YAML配置：

  - task: Cache@2
    inputs:
      key: 'npm | "$(Agent.OS)" | package-lock.json'
      restoreKeys: |
        npm | "$(Agent.OS)"
      path: $(npm_config_cache)
    displayName: Cache npm dependencies
  

  后续构建不用重新下载所有依赖，能节省大量时间。

2. 优化Webpack构建配置（Eject后可调整） #

既然已经eject，直接修改webpack.config.prod.js里的参数：

• 简化Source Map生成：生产环境若不需要完整source map，把devtool改成cheap-module-source-map（比默认的source-map生成快很多），甚至可直接关闭（设置为false），这一步能省不少时间。
• 启用并行编译：给babel-loader加上thread-loader，把编译任务分给多个线程处理。示例配置：

  // 在module.rules中找到babel-loader配置，修改为：
  {
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    include: paths.appSrc,
    use: [
      {
        loader: require.resolve('thread-loader'),
        options: {
          workers: require('os').cpus().length - 1,
        },
      },
      {
        loader: require.resolve('babel-loader'),
        // 你的原有babel配置...
      }
    ]
  }
  

• 优化代码压缩：确保TerserPlugin开启并行压缩（默认已开启，可检查确认），关闭不必要的压缩选项——比如若不需要兼容IE11，可去掉ecma: 5配置，改用更高版本ECMA标准，加快压缩速度。
• 排查冗余chunk：先在本地跑npm run build -- --analyze（需先安装webpack-bundle-analyzer），查看是否有重复打包的库或过大chunk，调整代码分割规则，避免不必要的打包内容。

3. 调整VSTS Pipeline资源配置 #

• 选择更高性能的代理池：默认微软托管代理资源有限，换成Windows Large或Ubuntu Large代理（CPU和内存更大），能显著提升构建速度。
• 统一Node.js版本：确保VSTS中使用的Node.js版本和本地一致，版本差异可能导致webpack编译效率不同。用Node.js Tool Installer任务指定具体版本：

  - task: NodeTool@0
    inputs:
      versionSpec: '18.x' # 替换成你本地使用的版本
    displayName: Install Node.js
  

4. 移除不必要的构建环节 #

• 如果build过程包含linting、测试等步骤，将其拆分为单独的Pipeline任务，或仅在本地执行，CI只做核心的构建和发布。
• 确保npm run build只生成生产环境所需文件，不要包含冗余中间产物。

按这个顺序一步步优化，应该能把构建时间控制在60分钟以内。我当时靠缓存+并行编译+调整source map，把构建时间从70分钟降到了15分钟左右。

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