尺寸限制操作：监控你的JavaScript应用性能预算

尺寸限制操作：监控你的JavaScript应用性能预算

size-limit-action Compare the real cost to run your JS app or lib to keep good performance in every pull request 项目地址: https://gitcode.com/gh_mirrors/siz/size-limit-action

项目介绍

尺寸限制操作是GitHub上的一个强大工具，专门用于比较每一个拉取请求中JavaScript的真实运行成本，确保应用或库保持良好的性能。它利用Size Limit这一性能预算工具来评估端用户的JavaScript加载时间。核心特性包括在PR上评论尺寸限制的输出比较，并且能够在成本超过预设限制时自动拒绝PR。通过这种方式，开发者可以在每次提交更改时都保持对应用性能的严格控制。

项目快速启动

步骤一：安装Size Limit

首先，根据你的项目类型（JS应用、大型或小型库），选择适合的方式安装Size Limit。

步骤二：配置Size Limit

在你的package.json文件中加入Size Limit的配置，例如：

"size-limit": [
  ["path": "dist/index.js", "limit": "4500 ms"]
]

步骤三：集成到GitHub Actions

在你的.github/workflows目录下创建或编辑一个size-limit.yml文件，添加以下内容以自动化执行尺寸检查：

name: "尺寸检查"
on:
  pull_request:
    branches:
      - master
permissions:
  pull-requests: write
jobs:
  size:
    runs-on: ubuntu-latest
    env:
      CI_JOB_NUMBER: 1
    steps:
      - uses: actions/checkout@v1
      - uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

自定义选项

你可以通过额外的参数来自定义工作流程，比如指定自定义构建脚本、跳过特定步骤等。

...
with:
  github_token: ${{ secrets.GITHUB_TOKEN }}
  build_script: 'custom-build'
  skip_step: 'install'
...

应用案例和最佳实践

• 持续集成：将尺寸限制操作整合到CI流程中，确保每个版本都不意外增加负担于最终用户的加载时间和性能。
• 性能预算管理：设定明确的大小和加载时间限制，团队成员在开发过程中始终保持关注性能优化。
• 防止膨胀：长期来看，该工具帮助控制项目随功能增加而自然产生的体积增长，维持应用的轻量化。

典型生态项目

虽然直接从上述内容提取特定“典型生态项目”信息不足，但Size Limit Action可以广泛应用于任何依赖JavaScript的项目中，特别是在那些特别注重前端性能监控和优化的场景下，如React, Angular或Vue.js的应用。在这些框架的项目中集成此GitHub Action，可以帮助团队维护应用的高效加载速度，避免不必要的资源消耗，促进更快的用户体验。

---

这个教程提供了从零开始设置并利用size-limit-action的基本步骤，以及如何将其融入到日常开发流程中的指引。通过遵循这些步骤，开发者能够有效监控其JavaScript应用程序的性能预算，确保每次部署都能符合最佳性能标准。

size-limit-action Compare the real cost to run your JS app or lib to keep good performance in every pull request 项目地址: https://gitcode.com/gh_mirrors/siz/size-limit-action