如何在Jenkins部署前检测LCP与FCP并设置性能预算拦截部署？

这个方案完全可行，不少前端团队已经在实际项目中用这套逻辑保障上线后的性能体验。

具体实现步骤 #

1. 选对性能检测工具 #

用Lighthouse或者WebPageTest CLI就行，它们能直接输出LCP、FCP的具体数值。比如在Jenkins构建脚本里跑Lighthouse命令：

# 检测预发布站点，输出JSON格式的性能报告
lighthouse https://your-staging-domain.com --output json --output-path ./performance-results.json

之后用Node.js或Python写个小脚本，从JSON里提取LCP和FCP的数值就行。

2. 把检测环节插到Jenkins部署前 #

在Jenkins Pipeline里加一个前置stage，放在部署步骤之前：

pipeline {
    agent any
    stages {
        stage('构建前端产物') {
            steps {
                // 这里是你的构建逻辑，比如npm run build
            }
        }
        stage('预发布环境启动') {
            steps {
                // 启动预发布服务，确保站点可访问
            }
        }
        stage('性能指标检测') {
            steps {
                sh 'lighthouse https://your-staging-domain.com --output json --output-path ./performance-results.json'
                script {
                    // 读取JSON结果，提取LCP和FCP
                    def perfResults = readJSON file: './performance-results.json'
                    def lcp = perfResults.audits['largest-contentful-paint'].numericValue / 1000
                    def fcp = perfResults.audits['first-contentful-paint'].numericValue / 1000
                    
                    // 预设性能预算
                    def lcpBudget = 2.5
                    def fcpBudget = 1.8
                    
                    // 校验预算
                    if (lcp > lcpBudget || fcp > fcpBudget) {
                        // 发送告警邮件
                        emailext(
                            to: 'your-team-email@xxx.com',
                            subject: "性能预算超标，部署终止",
                            body: "LCP: ${lcp}s（预算${lcpBudget}s），FCP: ${fcp}s（预算${fcpBudget}s）"
                        )
                        // 终止部署流程
                        error("性能指标超出预算，部署终止")
                    }
                }
            }
        }
        stage('部署到生产') {
            steps {
                // 这里是你的生产部署逻辑
            }
        }
    }
}

3. 细节优化 #

• 把性能预算写到单独的配置文件（比如perf-budget.json）里，不用每次改Pipeline代码
• 可以多跑几次检测取平均值，避免网络波动导致误判
• 把Lighthouse的HTML报告归档到Jenkins构建产物里，方便后续排查性能瓶颈

适用场景 #

• 前端迭代频繁的项目：比如电商、资讯类网站，每次上线都要防住代码改动带来的性能退化
• 对用户体验要求高的产品：比如金融平台、企业级办公应用，性能直接影响用户留存和信任
• 性能优化后的持续监控：做完性能优化后，用前置检测把优化成果守住，防止后续代码打回原形
• 多环境部署的质量把关：在预发布环境先过性能关，再推生产，避免生产环境出性能事故

内容的提问来源于stack exchange，提问作者Akash Verma