📦 Size Limit: 从开源项目学习如何为你的业务增加检测报告

  // ...
  "size-limit": [
    {
      "path": "./src/index.js",
      "limit": "50 ms"
    }
  ],
  // ...

  // ...
  "size-limit": [
    {
      "path": "./src/index.js",
      "limit": "10 ms"
    }
  ],
  // ...

// src/main.js
import { getInput } from "@actions/core";

function run() {
  // 用 getInput 方法中获取需要外部传入的变量
  const token = getInput('github_token');
  const skipStep = getInput('skip_step');
  const buildScript = getInput('build_script');
  const cleanScript = getInput('clean_script');
  const packageManager = getInput('package_manager');
  const directory = getInput('directory') || process.cwd();
}

run();

import { context, getOctokit } from '@actions/github';
// ...

function run() {
  const { payload, repo } = context;

  // 获取本次 pr 相关信息
  const pr = payload.pull_request;
  // 当前未非 PullRequest 操作下
  if (!pr) {
    throw new Error('No PR found. Only pull_request workflows are supported.');
  }

  const token = getInput('github_token');
  const skipStep = getInput('skip_step');
  const buildScript = getInput('build_script');
  const cleanScript = getInput('clean_script');
  const packageManager = getInput('package_manager');
  const directory = getInput('directory') || process.cwd();

  // PullRequest 环境下 初始化 github 操作实例
  const octokit = getOctokit(token);
}

// src/Term.ts
import { exec } from '@actions/exec';
import hasYarn from 'has-yarn';
import hasPNPM from 'has-pnpm';
import fs from 'node:fs';
import path from 'node:path';

function hasBun(cwd = process.cwd()) {
  return fs.existsSync(path.resolve(cwd, 'bun.lockb'));
}

export class Term {
  /**
   * Autodetects and gets the current package manager for the current directory, either yarn, pnpm, bun,
   * or npm. Default is `npm`.
   *
   * @param directory The current directory
   * @returns The detected package manager in use, one of `yarn`, `pnpm`, `npm`, `bun`
   */
  getPackageManager(directory?: string): string {
    return hasYarn(directory)
      ? 'yarn'
      : hasPNPM(directory)
      ? 'pnpm'
      : hasBun(directory)
      ? 'bun'
      : 'npm';
  }

  async execSizeLimit(
    branch?: string,
    buildScript?: string,
    cleanScript?: string,
    directory?: string,
    packageManager?: string
  ): Promise<{ status: number; output: string }> {
    // 获取当前项目的包管理工具
    const manager = packageManager || this.getPackageManager(directory);
    // SizeLimit 执行结果
    let output = '';

    // 如果传入分支，需要切换到对应目标分支
    if (branch) {
      try {
        await exec(`git fetch origin ${branch} --depth=1`);
      } catch (error) {
        console.log('Fetch failed', (error as any).message);
      }

      await exec(`git checkout -f ${branch}`);
    }

    // 调用包管理工具安装当前项目
    await exec(`${manager} install`, [], {
      cwd: directory
    });

    // 运行构建命令，获得当前项目构建产物
    const script = buildScript || 'build';
    await exec(`${manager} run ${script}`, [], {
      cwd: directory
    });

    // 调用 size-limit --json 命令获得当前项目下 package.json 配置的 size-limit 文件执行后的信息
    const status = await exec('npx size-limit --json', [], {
      ignoreReturnCode: true,
      listeners: {
        stdout: (data: Buffer) => {
          output += data.toString();
        }
      },
      
      cwd: directory
    });

    // 如果传入了 cleanScript，执行清空命令
    if (cleanScript) {
      await exec(`${manager} run ${cleanScript}`, [], {
        cwd: directory
      });
    }

    return {
      status,
      output
    };
  }
}

// src/main.ts
async function run() {
  // ... 
  // 当前提交分支下获取 size-limit 报告
  const { status, output } = await term.execSizeLimit(
    null,
    buildScript,
    cleanScript,
    directory,
    packageManager
  );
  // pr target 分支下获取 size-limit 报告
  const { output: baseOutput } = await term.execSizeLimit(
    pr.base.ref, // 需要切换到的目标分支
    buildScript,
    cleanScript,
    directory,
    packageManager
  );
}

import { SizeLimit } from './SizeLimit';

// src/main.ts
async function run() {
  // ... 
  
  // 同样，创建一个单独可复用的 SizeLimit Class 来单独管理数据格式化以及生成 markdown 的工具操作
  const limit = new SizeLimit();

  let base;
  let current;
  try {
    // 将 base 和 current 的报告格式化成为便于操作的 json object
    base = limit.parseResults(baseOutput);
    current = limit.parseResults(output);
  } catch (error) {
    console.log(
      'Error parsing size-limit output. The output should be a json.'
    );
    throw error;
  }
}

// src/SizeLimit.ts

class SizeLimit {
  parseResults(output: string): { [name: string]: IResult } {
    // 格式化 sizeLimit 输出的字符串
    const results = JSON.parse(output);
    // 格式化 sizeLimit Array ，输出为期望的 object 形式
    return results.reduce(
      (current: { [name: string]: IResult }, result: any) => {
        let time = {};

        if (result.loading !== undefined && result.running !== undefined) {
          const loading = +result.loading;
          const running = +result.running;

          time = {
            running,
            loading,
            // 总共的时间（加载+执行）
            total: loading + running
          };
        }

        return {
          // 原始报告内容
          ...current,
          // 增加后的内容
          [result.name]: {
            name: result.name,
            size: +result.size,
            ...time
          }
        };
      },
      {}
    );
  }
}
export { SizeLimit };

[
  {
    "name": "library",
    "passed": true,
    "size": 0,
    "running": 0,
    "loading": 0
  }
]

{
  library: { name: 'library', size: 0, running: 0, loading: 0, total: 0 }
}

// src/main.ts
import { markdownTable as table } from 'markdown-table';
const SIZE_LIMIT_HEADING = `## size-limit report 📦 `;

async function run() {
   // ...
  const limit = new SizeLimit();

  let base;
  let current;
  try {
    // 将 base 和 current 的报告格式化成为便于操作的 json object
    base = limit.parseResults(baseOutput);
    current = limit.parseResults(output);
  } catch (error) {
    console.log(
      'Error parsing size-limit output. The output should be a json.'
    );
    throw error;
  }

  const body = [
    SIZE_LIMIT_HEADING,
    // 生成 size-limit markdown table 形式的前后对比报告
    table(limit.formatResults(base, current))
  ].join('\r\n');
}

// src/SizeLimit.ts

// @ts-ignore
import bytes from 'bytes';

interface IResult {
  name: string;
  size: number;
  running?: number;
  loading?: number;
  total?: number;
}

const EmptyResult = {
  name: '-',
  size: 0,
  running: 0,
  loading: 0,
  total: 0
};

class SizeLimit {
  static SIZE_RESULTS_HEADER = ['Path', 'Size'];

  static TIME_RESULTS_HEADER = [
    'Path',
    'Size',
    'Loading time (3g)',
    'Running time (snapdragon)',
    'Total time'
  ];

  private formatBytes(size: number): string {
    return bytes.format(size, { unitSeparator: ' ' });
  }

  private formatTime(seconds: number): string {
    if (seconds >= 1) {
      return `${Math.ceil(seconds * 10) / 10} s`;
    }

    return `${Math.ceil(seconds * 1000)} ms`;
  }

  private formatSizeChange(base: number = 0, current: number = 0): string {
    const value = current - base;
    if (value > 0) {
      return `+${this.formatBytes(value)} 🔺`;
    }
    if (value < 0) {
      return `${this.formatBytes(value)} 🔽`;
    }
    return '';
  }

  private formatChange(base: number = 0, current: number = 0): string {
    if (base === 0) {
      return '+100% 🔺';
    }

    const value = ((current - base) / base) * 100;
    const formatted =
      (Math.sign(value) * Math.ceil(Math.abs(value) * 100)) / 100;

    if (value > 0) {
      return `+${formatted}% 🔺`;
    }

    if (value === 0) {
      return `${formatted}%`;
    }

    return `${formatted}% 🔽`;
  }

  private formatLine(value: string, change: string) {
    if (!change) {
      return value;
    }
    return `${value} (${change})`;
  }

  private formatSizeResult(
    name: string,
    base: IResult,
    current: IResult
  ): Array<string> {
    return [
      `\`${name}\``,
      this.formatLine(
        this.formatBytes(current.size),
        this.formatSizeChange(base.size, current.size)
      )
    ];
  }

  private formatTimeResult(
    name: string,
    base: IResult,
    current: IResult
  ): Array<string> {
    return [
      `\`${name}\``,
      this.formatLine(
        this.formatBytes(current.size),
        this.formatSizeChange(base.size, current.size)
      ),
      this.formatLine(
        this.formatTime(current.loading),
        this.formatChange(base.loading, current.loading)
      ),
      this.formatLine(
        this.formatTime(current.running),
        this.formatChange(base.running, current.running)
      ),
      this.formatTime(current.total)
    ];
  }

  parseResults(output: string): { [name: string]: IResult } {
    const results = JSON.parse(output);

    return results.reduce(
      (current: { [name: string]: IResult }, result: any) => {
        let time = {};

        if (result.loading !== undefined && result.running !== undefined) {
          const loading = +result.loading;
          const running = +result.running;

          time = {
            running,
            loading,
            total: loading + running
          };
        }

        return {
          ...current,
          [result.name]: {
            name: result.name,
            size: +result.size,
            ...time
          }
        };
      },
      {}
    );
  }

  formatResults(
    base: { [name: string]: IResult },
    current: { [name: string]: IResult }
  ): Array<Array<string>> {
    // 将前后数据的 key 进行合并去重
    const names = [...new Set([...Object.keys(base), ...Object.keys(current)])];

    // 项目中未安装 @size-limit/time package 的情况下则 total 字段会是 undefined
    // 判断当前报告是否仅包含 Size 报告（不包含 time ）
    const isSize = names.some(
      (name: string) => current[name] && current[name].total === undefined
    );

    // 根据不同的类型来生成不同的 table header
    const header = isSize
      ? SizeLimit.SIZE_RESULTS_HEADER
      : SizeLimit.TIME_RESULTS_HEADER;

    // 对比 names 中每一个字段生成前后对比的表格内容
    const fields = names.map((name: string) => {
      const baseResult = base[name] || EmptyResult;
      const currentResult = current[name] || EmptyResult;

      if (isSize) {
        return this.formatSizeResult(name, baseResult, currentResult);
      }
      return this.formatTimeResult(name, baseResult, currentResult);
    });

    // 返回对应的 markdown table 格式的 Array 数据
    return [header, ...fields];
  }
}
export { SizeLimit };

// src/main.ts

async function run() {
   // ...
   const body = [
    SIZE_LIMIT_HEADING,
    // 生成 size-limit markdown table 形式的前后对比报告
    table(limit.formatResults(base, current))
  ].join('\r\n');

  // 获取当前 PR 下的所有评论
  const commentLists = await octokit.paginate(
    'GET /repos/:owner/:repo/issues/:issue_number/comments',
    {
      ...repo,
      issue_number: pr.number
    }
  );
  // 判断当前 PR 下所有评论内容是否包含 size-limit 报告
  const sizeLimitComment = commentLists.find((comment) =>
    (comment as any).body.startsWith(SIZE_LIMIT_HEADING)
  );

  const comment = !sizeLimitComment ? null : sizeLimitComment;
}

// src/main.ts
// ...
async function run() {
  // ...
  const comment = !sizeLimitComment ? null : sizeLimitComment;

  if (!sizeLimitComment) {
    try {
      // 为 PR 关联的 issues 创建一条评论，内容为 size-limit 报告
      // 该条评论会同步在 PullRequest 下
      await octokit.rest.issues.createComment({
        ...repo,
        // eslint-disable-next-line camelcase
        issue_number: pr.number,
        body
      });
    } catch (error) {
      console.log(
        "Error creating comment. This can happen for PR's originating from a fork without write permissions."
      );
    }
  } else {
    try {
      // 为 PR 关联的 issues 更新 size-limit 评论内容
      await octokit.rest.issues.updateComment({
        ...repo,
        // eslint-disable-next-line camelcase
        comment_id: (comment as any).id,
        body
      });
    } catch (error) {
      console.log(
        "Error updating comment. This can happen for PR's originating from a fork without write permissions."
      );
    }
  }
}

// src/main.ts
async function run() {
   // ...
  // 当前提交分支下获取 size-limit 报告
  const { status, output } = await term.execSizeLimit(
    null,
    buildScript,
    cleanScript,
    directory,
    packageManager
  );
  // ...
  if (status > 0) {
    setFailed('Size limit has been exceeded.');
  }
}