Vue应用的性能预算（Performance Budget）配置：CI/CD集成与性能回归检测 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

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

大家好，今天我们来探讨 Vue 应用的性能预算配置，以及如何将其集成到 CI/CD 流程中，并进行性能回归检测。性能预算是保证应用性能的关键手段，通过明确设定性能指标并严格监控，我们可以避免性能劣化，提升用户体验。

1. 什么是性能预算？

性能预算是指为 Web 应用的各项性能指标设定的上限值。这些指标可以包括：

页面加载时间 (Page Load Time): 用户从发起请求到页面完全可交互的时间。
首屏渲染时间 (First Contentful Paint – FCP): 浏览器首次渲染任何内容的耗时。
最大内容渲染时间 (Largest Contentful Paint – LCP): 浏览器渲染页面上最大内容元素的耗时。
首次可交互时间 (Time to Interactive – TTI): 页面可交互所需的时间。
总阻塞时间 (Total Blocking Time – TBT): FCP 和 TTI 之间，主线程被阻塞无法响应用户输入的时间。
资源大小 (Resource Size): JavaScript、CSS、图片等资源的大小。
HTTP 请求数量 (HTTP Request Count): 页面加载期间发出的 HTTP 请求数量。

设置性能预算的目的是：

建立性能目标: 明确应用应该达到的性能水平。
指导开发决策: 引导开发人员在开发过程中关注性能。
持续监控性能: 及时发现性能问题并进行修复。

2. Vue 应用的性能预算指标设定

针对 Vue 应用，我们可以参考以下一些建议的性能预算指标：

指标	建议预算值	说明
页面加载时间	< 3 秒	用户对加载时间的容忍度有限，超过 3 秒会显著降低用户体验。
FCP	< 1 秒	快速渲染首屏内容可以给用户积极的初步印象。
LCP	< 2.5 秒	确保用户在短时间内看到页面上的主要内容。
TTI	< 5 秒	用户可以尽快与页面进行交互。
TBT	< 300 毫秒	减少主线程阻塞时间，提升页面响应速度。
JavaScript 大小	< 500 KB (压缩后)	避免 JavaScript 文件过大，影响页面加载和解析速度。
CSS 大小	< 150 KB (压缩后)	同 JavaScript，减少 CSS 文件大小。
图片大小	根据具体情况而定，尽量优化图片大小和格式	使用合适的图片格式（WebP、AVIF），进行压缩和懒加载。
HTTP 请求数量	< 20 个	减少 HTTP 请求可以降低网络延迟带来的影响。可以使用 HTTP/2 或 HTTP/3 进行多路复用。

这些指标只是建议值，具体的预算需要根据应用的实际情况进行调整。例如，对于内容丰富的电商网站，可以适当放宽页面加载时间和资源大小的预算。

3. 如何配置性能预算？

我们可以使用多种工具来配置和监控性能预算。常用的工具有：

Lighthouse: Google Chrome 开发者工具内置的性能分析工具，可以生成详细的性能报告，并检查是否超出预算。
WebPageTest: 一个强大的在线性能测试工具，可以模拟不同的网络环境和设备，并提供详细的性能指标。
Bundle Analyzer: 用于分析 Vue 应用的 bundle 大小，找出可以优化的模块。
Webpack Performance Hints: Webpack 提供的性能提示功能，可以在构建过程中检查资源大小和加载时间是否超出阈值。

下面我们将重点介绍如何使用 Webpack Performance Hints 和 Lighthouse 来配置性能预算。

3.1 使用 Webpack Performance Hints

Webpack Performance Hints 允许我们在构建过程中设置性能预算，并在资源大小或加载时间超出阈值时发出警告或错误。

在 webpack.config.js 中配置 performance 选项：

module.exports = {
  // ...
  performance: {
    hints: 'warning', // 或者 'error'，超出预算时发出警告或错误
    maxAssetSize: 250000, // 最大资源大小（单位：字节）
    maxEntrypointSize: 400000, // 最大入口点大小（单位：字节）
    assetFilter: function (assetFilename) {
      // 过滤需要检查的资源
      return assetFilename.endsWith('.js') || assetFilename.endsWith('.css');
    }
  }
};

hints: 指定当资源超出预算时，Webpack 应该如何处理。可以设置为 'warning' (发出警告)，'error' (发出错误)，或者 false (禁用性能提示)。
maxAssetSize: 单个资源的最大大小 (单位：字节)。如果某个资源的大小超过这个值，Webpack 会发出警告或错误。
maxEntrypointSize: 入口点资源的最大大小 (单位：字节)。一个入口点可能包含多个资源，如果所有资源的总体大小超过这个值，Webpack 会发出警告或错误。
assetFilter: 一个函数，用于过滤需要检查的资源。只有返回 true 的资源才会被检查。

3.2 使用 Lighthouse

Lighthouse 可以帮助我们更全面地评估 Vue 应用的性能，并检查是否超出预算。

首先，我们需要安装 Lighthouse CLI：

npm install -g lighthouse

然后，我们可以使用以下命令来运行 Lighthouse：

lighthouse https://example.com --budget-path=./budget.json

https://example.com: 要测试的 URL。
--budget-path=./budget.json: 指定性能预算文件的路径。

budget.json 文件定义了性能预算的具体指标：

[
  {
    "path": "/*",
    "resourceSizes": [
      {
        "resourceType": "script",
        "budget": 500
      },
      {
        "resourceType": "stylesheet",
        "budget": 150
      },
      {
        "resourceType": "image",
        "budget": 200
      }
    ],
    "timings": [
      {
        "metric": "first-contentful-paint",
        "budget": 1000
      },
      {
        "metric": "largest-contentful-paint",
        "budget": 2500
      },
      {
        "metric": "total-blocking-time",
        "budget": 300
      }
    ],
    "counts": [
      {
        "resourceType": "total",
        "budget": 20
      }
    ]
  }
]

path: 要应用预算的 URL 路径。/* 表示所有路径。
resourceSizes: 资源大小预算。
- resourceType: 资源类型 (script, stylesheet, image 等)。
- budget: 预算大小 (单位：KB)。
timings: 时间指标预算。
- metric: 时间指标名称 (first-contentful-paint, largest-contentful-paint, total-blocking-time 等)。
- budget: 预算时间 (单位：毫秒)。
counts: 数量指标预算。
- resourceType: 指标类型 (total, third-party 等)。
- budget: 预算数量。

Lighthouse 会将实际的性能指标与 budget.json 中定义的预算进行比较，并在报告中显示是否超出预算。

4. CI/CD 集成

将性能预算集成到 CI/CD 流程中可以帮助我们在每次代码提交或部署时自动进行性能测试，及时发现性能问题。

我们可以使用 Jenkins、GitLab CI、GitHub Actions 等 CI/CD 工具来集成 Lighthouse 或 WebPageTest。

以下是一个使用 GitHub Actions 集成 Lighthouse 的示例：

name: Performance Budget Check

on:
  push:
    branches:
      - main

jobs:
  lighthouse:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            http://localhost:8080
          configPath: ./lighthouserc.js
          budgetPath: ./budget.json
          upload: false
          temporaryPublicStorage: true

      - name: Upload Lighthouse report artifact
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: lighthouse-report
          path: ./lighthouserc.js/reports
          retention-days: 1

name: GitHub Actions 工作流程的名称。
on: 触发工作流程的事件。push 表示当有代码推送到 main 分支时触发。
jobs: 定义工作流程中的任务。
lighthouse: Lighthouse 测试任务。
- runs-on: 指定运行任务的操作系统。
- steps: 任务中的步骤。
  - actions/checkout@v3: 检出代码。
  - npm install: 安装依赖。
  - npm run build: 构建项目。
  - treosh/lighthouse-ci-action@v10: 运行 Lighthouse。
    - urls: 要测试的 URL。这里使用 http://localhost:8080，需要先启动本地服务器。
    - configPath: Lighthouse 配置文件的路径。
    - budgetPath: 性能预算文件的路径。
    - upload: false: 不上传报告到 Lighthouse CI 服务器。
    - temporaryPublicStorage: true: 使用临时公共存储来存储报告。
  - actions/upload-artifact@v3: 上传 Lighthouse 报告作为构建产物。

lighthouserc.js 文件定义了 Lighthouse 的配置：

module.exports = {
  ci: {
    collect: {
      staticDistDir: './dist', // 构建后的静态资源目录
      url: ['http://localhost:8080'],
    },
    assert: {
      preset: 'lighthouse:recommended',
      assertions: {
        'resource-summary:script:size': ['warn', { maxNumericValue: 500 }], // JavaScript 大小预算
        'resource-summary:stylesheet:size': ['warn', { maxNumericValue: 150 }], // CSS 大小预算
        'first-contentful-paint': ['warn', { maxNumericValue: 1000 }], // FCP 预算
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }], // LCP 预算
        'total-blocking-time': ['warn', { maxNumericValue: 300 }], // TBT 预算
        'resource-count:total': ['warn', { maxNumericValue: 20 }], // 总请求数预算
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

这个配置文件指定了 Lighthouse 的收集、断言和上传配置。

collect: 定义 Lighthouse 如何收集性能数据。
- staticDistDir: 构建后的静态资源目录。
- url: 要测试的 URL。
assert: 定义性能断言。
- preset: 使用 Lighthouse 推荐的断言规则。
- assertions: 自定义断言规则。可以覆盖或扩展 preset 中的规则。
upload: 定义 Lighthouse 如何上传报告。
- target: 上传目标。这里使用 temporary-public-storage，表示上传到临时公共存储。

5. 性能回归检测

性能回归检测是指在代码变更后，检测性能是否出现劣化。通过持续监控性能指标，我们可以及时发现并修复性能问题。

除了在 CI/CD 流程中集成性能测试之外，我们还可以使用以下方法进行性能回归检测：

定期手动测试: 定期使用 Lighthouse 或 WebPageTest 手动测试应用的性能，并记录测试结果。
性能监控工具: 使用性能监控工具 (例如 New Relic、Datadog) 实时监控应用的性能指标，并在性能出现异常时发出警报。
用户体验监控: 使用用户体验监控工具 (例如 Google Analytics、Mixpanel) 收集用户的性能数据，并分析用户的体验。

6. 性能优化策略

当性能超出预算时，我们需要采取一些性能优化策略来提升应用的性能。以下是一些常用的 Vue 应用性能优化策略：

代码分割 (Code Splitting): 将代码分割成多个 chunk，按需加载，减少初始加载时间。可以使用 Webpack 的 import() 语法或 Vue Router 的 lazy-load 组件来实现代码分割。
懒加载 (Lazy Loading): 延迟加载非关键资源 (例如图片、组件)，提升首屏渲染速度。可以使用 IntersectionObserver API 或 Vue 的 v-intersect 指令来实现懒加载。
组件优化 (Component Optimization): 避免不必要的组件渲染和更新。可以使用 Vue.memo、shouldComponentUpdate 等方法来优化组件性能。
图片优化 (Image Optimization): 使用合适的图片格式 (WebP、AVIF)，压缩图片大小，并使用 CDN 加速图片加载。
服务端渲染 (Server-Side Rendering – SSR): 在服务器端渲染 Vue 应用，提升首屏渲染速度，改善 SEO。可以使用 Nuxt.js 框架来实现 SSR。
缓存 (Caching): 使用浏览器缓存、CDN 缓存或服务器端缓存来减少请求数量和延迟。
Tree Shaking: 移除未使用的代码，减少 bundle 大小。

示例：使用 Vue Router 实现懒加载

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

通过使用 import() 函数，我们可以将 Home.vue 和 About.vue 组件分割成单独的 chunk，并在用户访问对应的路由时才加载。webpackChunkName 注释可以指定 chunk 的名称。

示例：使用 IntersectionObserver API 实现图片懒加载

<template>
  <img :src="imageSrc" :data-src="originalSrc" ref="image" alt="Lazy Loaded Image">
</template>

<script>
export default {
  props: {
    originalSrc: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      imageSrc: 'placeholder.jpg' // 占位图
    }
  },
  mounted() {
    this.lazyLoadImage();
  },
  methods: {
    lazyLoadImage() {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const image = entry.target;
            this.imageSrc = image.dataset.src;
            observer.unobserve(image);
          }
        });
      });

      observer.observe(this.$refs.image);
    }
  }
}
</script>

这个组件使用 IntersectionObserver API 来监听图片是否出现在视口中。当图片出现在视口中时，将 imageSrc 替换为 originalSrc，触发图片加载。

7. 持续监控，不断优化

性能优化是一个持续的过程，需要我们不断地监控应用的性能，并根据实际情况进行调整。通过建立完善的性能预算体系，并将其集成到 CI/CD 流程中，我们可以有效地保证 Vue 应用的性能，提升用户体验。

总结：性能预算是关键，持续优化是保障

配置性能预算对于确保 Vue 应用的性能至关重要。集成到 CI/CD 流程可以自动化性能测试，而持续监控则能及时发现并解决潜在的性能问题。通过合理的性能优化策略，我们可以显著提升用户体验。

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

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

发表回复 取消回复

发表回复取消回复