28设计性能守卫系统：完善CICD流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
(async () => {
  // 启动一个 chrome，
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
  // 使用 lighthouse 对目标页面进行跑分
  const runnerResult = await lighthouse('https://example.com', options);
  // `.report` 是一个 html 类型的分析页面
  const reportHtml = runnerResult.report;
  fs.writeFileSync('lhreport.html', reportHtml);
  // `.lhr` 是用于 lighthous-ci 的结果集合
  console.log('Report is done for', runnerResult.lhr.finalUrl);
  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);
  await chrome.kill();
})();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

async run(runOptions: RunOptions) {
	// 检查相关数据
  const results = {};
  // 使用 Puppeteer 创建一个无头浏览器
  const context = await this.createPuppeteer(runOptions);
  try {
    // 执行必要的登录流程
    await this.Login(context);
    // 页面打开前的钩子函数
    await this.before(context);
    // 打开页面，获取 lighthouse 数据
    await this.getLighthouseResult(context);
    // 页面打开后的钩子函数
    await this.after(context, results);
    // 收集页面性能数据
    return await this.collectArtifact(context, results);
  } catch (error) {
    throw error;
  } finally {
    // 关闭页面和无头浏览器
    await this.disposeDriver(context);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

async createPuppeteer (runOptions: RunOptions) {
	// 启动配置项可以参考 [puppeteerlaunchoptions](https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v5.3.0&show=api-puppeteerlaunchoptions)
  const launchOptions: puppeteer.LaunchOptions = {
    headless: true, // 是否采用无头模式
    defaultViewport: { width: 1440, height: 960 }, // 指定页面视口宽高
    args: ['--no-sandbox', '--disable-dev-shm-usage'],
    // Chromium 安装路径
    executablePath: 'xxx',
  };
  // 创建一个浏览器对象
  const browser = await puppeteer.launch(launchOptions);
  const page = (await browser.pages())[0];
  // 返回浏览器和页面对象
  return { browser, page };
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

async getLighthouseResult(context: Context) {
	// 获取上下文信息，包括 browser 和页面地址
  const { browser, url } = context;
  // 使用 lighthouse 模块进行性能采集
  const { artifacts, lhr } = await lighthouse(url, {
    port: new URL(browser.wsEndpoint()).port,
    output: 'json',
    logLevel: 'info',
    emulatedFormFactor: 'desktop',
    throttling: {
      rttMs: 40,
      throughputKbps: 10 * 1024,
      cpuSlowdownMultiplier: 1,
      requestLatencyMs: 0, 
      downloadThroughputKbps: 0,
      uploadThroughputKbps: 0,
    },
    disableDeviceEmulation: true,
    // 只检测 performance 模块
    onlyCategories: ['performance'],
  });
  // 回填数据
  context.lhr = lhr;
  context.artifacts = artifacts;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

module.exports = {
  // 对应 audits
  audits: [{
    path: 'lighthouse-plugin-cinememe/audits/cinememe.js',
  }],
  // 该 plugin 对应的 category
  category: {
    title: 'Obligatory Cinememes',
    description: 'Modern webapps should have cinememes to ensure a positive ' +
      'user experience.',
    auditRefs: [
      {id: 'cinememe', weight: 1},
    ],
  },
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

'use strict';
const Audit = require('lighthouse').Audit;
// 继承 Audit 类
class CinememeAudit extends Audit {
  static get meta() {
    return {
      id: 'cinememe',
      title: 'Has cinememes',
      failureTitle: 'Does not have cinememes',
      description: 'This page should have a cinememe in order to be a modern ' +
        'webapp.',
      requiredArtifacts: ['ImageElements'],
    };
  }
  static audit(artifacts) {
    // 默认 hasCinememe 为 false（大小超过 5MB 的 GIF 图片）
    let hasCinememe = false;
    // 非 Cinememe 图片结果
    const results = [];
    // 过滤筛选相关图片
    artifacts.ImageElements.filter(image => {
      return !image.isCss &&
        image.mimeType &&
        image.mimeType !== 'image/svg+xml' &&
        image.naturalHeight > 5 &&
        image.naturalWidth > 5 &&
        image.displayedWidth &&
        image.displayedHeight;
    }).forEach(image => {
      if (image.mimeType === 'image/gif' && image.resourceSize >= 5000000) {
        hasCinememe = true;
      } else {
        results.push(image);
      }
    });
    const headings = [
      {key: 'src', itemType: 'thumbnail', text: ''},
      {key: 'src', itemType: 'url', text: 'url'},
      {key: 'mimeType', itemType: 'text', text: 'MIME type'},
      {key: 'resourceSize', itemType: 'text', text: 'Resource Size'},
    ];
    return {
      score: hasCinememe > 0 ? 1 : 0,
      details: Audit.makeTableDetails(headings, results),
    };
  }
}
module.exports = CinememeAudit;