feat: add performance audit script with Lighthouse
This commit is contained in:
@@ -0,0 +1,100 @@
|
|||||||
|
const { runLighthouse, generateReport, extractMetrics } = require('./utils/lighthouse-runner');
|
||||||
|
|
||||||
|
const PAGES = [
|
||||||
|
{ name: '首页', url: 'http://localhost:3000' },
|
||||||
|
{ name: '关于我们', url: 'http://localhost:3000/about' },
|
||||||
|
{ name: '联系我们', url: 'http://localhost:3000/contact' },
|
||||||
|
{ name: '服务', url: 'http://localhost:3000/services' },
|
||||||
|
{ name: '产品', url: 'http://localhost:3000/products' },
|
||||||
|
{ name: '案例', url: 'http://localhost:3000/cases' },
|
||||||
|
{ name: '新闻', url: 'http://localhost:3000/news' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const THRESHOLDS = {
|
||||||
|
performance: 80,
|
||||||
|
accessibility: 80,
|
||||||
|
bestPractices: 80,
|
||||||
|
seo: 80
|
||||||
|
};
|
||||||
|
|
||||||
|
async function auditAllPages() {
|
||||||
|
console.log('🚀 开始性能审计...\n');
|
||||||
|
|
||||||
|
const results = [];
|
||||||
|
const reportDir = 'test-results/performance';
|
||||||
|
|
||||||
|
if (!fs.existsSync(reportDir)) {
|
||||||
|
fs.mkdirSync(reportDir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const page of PAGES) {
|
||||||
|
console.log(`📊 审计页面: ${page.name} (${page.url})`);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await runLighthouse(page.url, {
|
||||||
|
onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
|
||||||
|
output: 'html'
|
||||||
|
});
|
||||||
|
|
||||||
|
const metrics = extractMetrics(result);
|
||||||
|
const reportPath = path.join(reportDir, `${page.name.toLowerCase().replace(/\s+/g, '-')}-report.html`);
|
||||||
|
generateReport(result, reportPath);
|
||||||
|
|
||||||
|
results.push({
|
||||||
|
page: page.name,
|
||||||
|
url: page.url,
|
||||||
|
metrics,
|
||||||
|
reportPath
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(` ✅ 性能: ${metrics.performance.toFixed(0)}`);
|
||||||
|
console.log(` ✅ 可访问性: ${metrics.accessibility.toFixed(0)}`);
|
||||||
|
console.log(` ✅ 最佳实践: ${metrics.bestPractices.toFixed(0)}`);
|
||||||
|
console.log(` ✅ SEO: ${metrics.seo.toFixed(0)}`);
|
||||||
|
console.log(` 📄 报告: ${reportPath}\n`);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(` ❌ 审计失败: ${error.message}\n`);
|
||||||
|
results.push({
|
||||||
|
page: page.name,
|
||||||
|
url: page.url,
|
||||||
|
error: error.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateSummary(results) {
|
||||||
|
console.log('\n📈 审计摘要\n');
|
||||||
|
console.log('─'.repeat(80));
|
||||||
|
|
||||||
|
const table = results.map(r => {
|
||||||
|
if (r.error) {
|
||||||
|
return `| ${r.page.padEnd(20)} | ❌ 失败: ${r.error.substring(0, 30)} |`;
|
||||||
|
}
|
||||||
|
const status = (m) => m >= THRESHOLDS.performance ? '✅' : '⚠️';
|
||||||
|
return `| ${r.page.padEnd(20)} | ${status(r.metrics.performance)} ${r.metrics.performance.toFixed(0)} | ${status(r.metrics.accessibility)} ${r.metrics.accessibility.toFixed(0)} | ${status(r.metrics.seo)} ${r.metrics.seo.toFixed(0)} |`;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('| 页面'.padEnd(20) + ' | 性能 | 可访问性 | SEO |');
|
||||||
|
console.log('─'.repeat(80));
|
||||||
|
table.forEach(row => console.log(row));
|
||||||
|
console.log('─'.repeat(80));
|
||||||
|
|
||||||
|
const passed = results.filter(r => !r.error && r.metrics.performance >= THRESHOLDS.performance).length;
|
||||||
|
const total = results.length;
|
||||||
|
console.log(`\n📊 总计: ${passed}/${total} 页面达到性能标准 (${(passed/total*100).toFixed(1)}%)`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
const results = await auditAllPages();
|
||||||
|
generateSummary(results);
|
||||||
|
|
||||||
|
const jsonPath = path.join('test-results', 'performance-summary.json');
|
||||||
|
fs.writeFileSync(jsonPath, JSON.stringify(results, null, 2));
|
||||||
|
console.log(`\n💾 详细结果已保存到: ${jsonPath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch(console.error);
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
const lighthouse = require('lighthouse');
|
||||||
|
const chromeLauncher = require('chrome-launcher');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
async function runLighthouse(url, options = {}) {
|
||||||
|
const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
|
||||||
|
options.port = chrome.port;
|
||||||
|
|
||||||
|
const runnerResult = await lighthouse(url, options);
|
||||||
|
await chrome.kill();
|
||||||
|
|
||||||
|
return runnerResult;
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateReport(result, outputPath) {
|
||||||
|
const reportHtml = result.report;
|
||||||
|
fs.writeFileSync(outputPath, reportHtml);
|
||||||
|
return outputPath;
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractMetrics(result) {
|
||||||
|
const categories = result.reportCategories;
|
||||||
|
return {
|
||||||
|
performance: categories.performance?.score * 100 || 0,
|
||||||
|
accessibility: categories.accessibility?.score * 100 || 0,
|
||||||
|
bestPractices: categories['best-practices']?.score * 100 || 0,
|
||||||
|
seo: categories.seo?.score * 100 || 0,
|
||||||
|
pwa: categories.pwa?.score * 100 || 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { runLighthouse, generateReport, extractMetrics };
|
||||||
Reference in New Issue
Block a user