如何解决Lighthouse CI无法识别异步生成站点URL配置的问题

问题根因 #

Lighthouse CI 加载JavaScript格式的配置文件时采用同步逻辑，不支持异步函数/Promise类型的导出值。你当前导出的是Promise实例，lhci无法解析其内部的ci字段，导致配置不生效。

解决方案 #

方案1：改造为同步获取页面路径 #

如果你的页面路径获取逻辑可以改造为同步实现（比如同步读取构建产物目录生成路径列表），直接调整配置为同步导出即可：

const getPagesSync = require('./lighthouse'); // 替换为同步版本的路径获取方法

const urls = getPagesSync();
module.exports = {
  ci: {
    collect: {
      url: urls,
      numberOfRuns: 1,
    },
    preset: 'lighthouse:no-pwa',
    assertions: {
      'categories:accessibility': ['warn', { minScore: 0.9 }],
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

方案2：预先生成路径列表再运行lhci #

如果页面路径只能异步获取，你可以分两步执行：

1. 新增generate-urls.js脚本，提前将路径写入本地临时文件：

const fs = require('fs');
const getPages = require('./lighthouse');

(async () => {
  const urls = await getPages();
  fs.writeFileSync('./lhci-urls.json', JSON.stringify(urls));
})().catch(console.error);

2. 修改lighthouserc.js配置，同步读取路径文件：

const urls = require('./lhci-urls.json');

module.exports = {
  ci: {
    collect: {
      url: urls,
      numberOfRuns: 1,
    },
    preset: 'lighthouse:no-pwa',
    assertions: {
      'categories:accessibility': ['warn', { minScore: 0.9 }],
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

3. 调整执行命令，先生成路径再运行lhci：

node generate-urls.js && lhci autorun

注意事项 #

如果配置生效后仍无法识别路径列表，可尝试将collect下的url字段改为urls，部分版本的lhci对复数字段名兼容性更好。

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