发布于 由admin

Vue应用的性能预算（Performance Budget）配置：CI/CD集成与性能回归检测

Vue 应用性能预算配置：CI/CD 集成与性能回归检测

大家好，今天我们来聊聊 Vue 应用的性能预算配置，以及如何在 CI/CD 流程中集成性能测试，以防止性能回归。性能对于任何 Web 应用都至关重要，尤其是在用户体验方面。一个缓慢的应用会直接导致用户流失，降低转化率。因此，在开发过程中尽早并持续地关注性能至关重要。

什么是性能预算？

性能预算是指为你的 Web 应用设定的性能目标，通常以指标的形式呈现，例如：

  • 首次可交互时间 (TTI): 用户可以与页面进行交互的时间。
  • 首次内容绘制 (FCP): 浏览器首次绘制任何内容的时间。
  • 最大内容绘制 (LCP): 页面上最大的内容元素绘制完成的时间。
  • 页面总大小: 所有资源（HTML, CSS, JavaScript, 图片等）的总大小。
  • JavaScript 大小: 所有 JavaScript 文件的总大小。
  • HTTP 请求数量: 浏览器向服务器发出的请求数量。

设定性能预算的目的是为了在开发过程中提供清晰的目标，并帮助团队做出更明智的决策。例如，如果你的 JavaScript 大小预算是 200KB，那么你就需要注意避免引入不必要的依赖，或者优化你的代码以减少文件大小。

性能预算的制定策略

制定合理的性能预算需要考虑以下因素：

  • 用户画像: 你的目标用户是谁？他们的网络环境如何？他们的设备性能如何？
  • 业务目标: 你的应用需要实现哪些业务目标？这些目标对性能有什么要求？
  • 竞争对手: 你的竞争对手的性能如何？你需要达到什么样的性能水平才能保持竞争力？

一个常用的方法是根据用户画像和业务目标，设定一个可接受的性能范围。例如，对于一个面向移动用户的电商应用，你可能需要设定以下性能预算：

指标 预算
TTI < 3 秒
FCP < 1 秒
LCP < 2.5 秒
页面总大小 < 2 MB
JavaScript 大小 < 500 KB

如何配置性能预算？

配置性能预算的方式有很多种，这里介绍两种常用的方法：

  1. LightHouse Thresholds: 使用 Lighthouse CLI 的 thresholds 功能。
  2. Webpack Bundle Analyzer + 自定义脚本: 使用 Webpack Bundle Analyzer 分析包大小，并使用自定义脚本检查是否超过预算。

1. 使用 Lighthouse Thresholds

Lighthouse 是 Google 提供的一个开源的性能评估工具。它可以通过模拟真实用户场景来评估 Web 应用的性能，并提供详细的性能报告。Lighthouse CLI 允许你使用命令行运行 Lighthouse，并设置性能预算。

首先，你需要安装 Lighthouse CLI:

npm install -g lighthouse

然后，你可以创建一个 lighthouse.config.js 文件，并在其中设置性能预算：

// lighthouse.config.js
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:8080'], // 你的应用地址
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 1000 }], // FCP < 1 秒
        'interactive': ['warn', { maxNumericValue: 3000 }], // TTI < 3 秒
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }], // LCP < 2.5 秒
        'total-blocking-time': ['warn', { maxNumericValue: 400 }], // TBT < 400ms
        'performance': ['warn', { minScore: 0.9 }], // Performance score >= 0.9
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

在这个配置文件中，collect.url 指定了你要测试的 URL。assert.assertions 定义了性能预算。你可以根据你的需要添加或修改这些断言。warn 表示如果超出预算，Lighthouse 会发出警告，但不会阻止构建。如果你想阻止构建，可以将 warn 改为 error。

最后，你可以使用以下命令运行 Lighthouse CLI:

lighthouse-ci autorun

这个命令会运行 Lighthouse，并根据你的配置检查性能预算。如果超出预算，它会发出警告或错误。

2. 使用 Webpack Bundle Analyzer + 自定义脚本

Webpack Bundle Analyzer 是一个 Webpack 插件，可以可视化你的 JavaScript 包的大小。你可以使用它来分析你的包，并找出哪些模块占用了最多的空间。

首先，你需要安装 Webpack Bundle Analyzer:

npm install --save-dev webpack-bundle-analyzer

然后，你需要在你的 Webpack 配置文件中添加这个插件：

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static', // 生成静态 HTML 文件
      reportFilename: 'report.html', // 报告文件名
      openAnalyzer: false, // 不要自动打开报告
    }),
  ],
};

在这个配置中，analyzerMode: 'static' 表示生成静态 HTML 文件，reportFilename 指定了报告文件名，openAnalyzer: false 表示不要自动打开报告。

运行 Webpack 构建后，会生成一个 report.html 文件，你可以用浏览器打开它来查看你的包大小。

接下来，你需要编写一个自定义脚本来检查包大小是否超过预算。你可以使用 Node.js 来实现这个脚本：

// check-bundle-size.js
const fs = require('fs');
const path = require('path');
const gzipSize = require('gzip-size');

const bundlePath = path.resolve(__dirname, 'dist/js/app.js'); // 你的 bundle 文件路径
const maxSize = 500 * 1024; // 500KB 预算

fs.readFile(bundlePath, 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading bundle file:', err);
    process.exit(1);
  }

  gzipSize(data).then(size => {
    console.log(`Bundle size (gzip): ${size} bytes`);

    if (size > maxSize) {
      console.error(`Bundle size exceeds budget (${maxSize} bytes)`);
      process.exit(1);
    }

    console.log('Bundle size within budget');
  });
});

这个脚本会读取你的 bundle 文件，使用 gzip-size 计算 gzip 压缩后的文件大小，然后检查是否超过预算。如果超过预算，它会输出错误信息并退出。

最后，你可以在你的 package.json 文件中添加一个 script 来运行这个脚本：

// package.json
{
  "scripts": {
    "build": "webpack",
    "check-bundle-size": "node check-bundle-size.js"
  }
}

然后，你可以使用以下命令运行这个脚本：

npm run check-bundle-size

CI/CD 集成

将性能预算集成到 CI/CD 流程中可以确保每次代码提交都会经过性能测试，从而防止性能回归。

这里以 GitHub Actions 为例，介绍如何将 Lighthouse 和自定义脚本集成到 CI/CD 流程中。

首先，你需要在你的 GitHub 仓库中创建一个 .github/workflows 目录，并在其中创建一个 performance.yml 文件：

# .github/workflows/performance.yml
name: Performance Test

on:
  push:
    branches:
      - main # 只有 push 到 main 分支时才运行
  pull_request:
    branches:
      - main # 只有 pull request 到 main 分支时才运行

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16 # 根据你的项目选择 Node.js 版本
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Run Lighthouse CI
        run: npm run lhci autorun # 假设你在 package.json 中定义了 lhci 脚本

  bundle-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16 # 根据你的项目选择 Node.js 版本
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Check bundle size
        run: npm run check-bundle-size # 运行自定义脚本

这个 workflow 定义了两个 jobs: lighthouse 和 bundle-size。lighthouse job 运行 Lighthouse CI 来检查性能预算，bundle-size job 运行自定义脚本来检查包大小。

当代码 push 到 main 分支或 pull request 到 main 分支时，这个 workflow 会自动运行。如果性能测试失败，workflow 会失败，从而阻止代码合并。

性能回归检测

仅仅配置性能预算是不够的，还需要定期进行性能回归检测，以确保应用的性能不会随着时间的推移而下降。

性能回归检测可以手动进行，也可以自动化进行。手动检测需要定期运行 Lighthouse 或其他性能测试工具，并分析测试结果。自动化检测可以使用 CI/CD 流程来定期运行性能测试，并将测试结果与历史数据进行比较。

为了更好地进行性能回归检测，建议将性能测试结果存储起来，并使用图表来可视化性能趋势。这样可以更容易地发现性能问题，并及时采取措施。

一些工具和服务可以帮助你进行性能回归检测，例如:

  • Lighthouse CI: 可以将 Lighthouse 测试结果上传到云端，并提供可视化界面。
  • WebPageTest: 一个免费的 Web 应用性能测试工具，可以测试你的应用在不同网络环境下的性能。
  • SpeedCurve: 一个商业的 Web 应用性能监控工具，可以提供实时的性能数据和告警。

总结

性能预算是确保 Web 应用性能的关键。通过设定合理的性能预算，并在 CI/CD 流程中集成性能测试，可以有效地防止性能回归，从而提升用户体验。工具和流程的结合保障了性能的持续优化。

持续关注性能，优化用户体验

定期审查和调整性能预算，关注新的性能优化技术和最佳实践，持续改进你的 Web 应用的性能，为用户提供更好的体验。持续监控和优化是性能保障的关键。

更多IT精英技术系列讲座，到智猿学院

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注