Skip to content

Commit 8fcc465

Browse files
BioPhotonBioPhoton
authored
feat(examples-plugins): add lighthouse to examples (#417)
1 parent 50a7060 commit 8fcc465

19 files changed

+1535
-5
lines changed

‎code-pushup.config.ts

+11
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import 'dotenv/config';
2+
import { join } from 'node:path';
23
import { z } from 'zod';
34
import {
5+
LIGHTHOUSE_OUTPUT_FILE_DEFAULT,
46
fileSizePlugin,
57
fileSizeRecommendedRefs,
8+
lighthouseCorePerfGroupRefs,
9+
lighthousePlugin,
610
packageJsonDocumentationGroupRef,
711
packageJsonPerformanceGroupRef,
812
packageJsonPlugin,
@@ -84,6 +88,12 @@ const config: CoreConfig = {
8488
license: 'MIT',
8589
type: 'module',
8690
}),
91+
92+
await lighthousePlugin({
93+
url: 'https://staging.code-pushup.dev/login',
94+
outputPath: join('.code-pushup', LIGHTHOUSE_OUTPUT_FILE_DEFAULT),
95+
headless: true,
96+
}),
8797
],
8898

8999
categories: [
@@ -130,6 +140,7 @@ const config: CoreConfig = {
130140
...fileSizeRecommendedRefs,
131141
packageJsonPerformanceGroupRef,
132142
packageJsonDocumentationGroupRef,
143+
...lighthouseCorePerfGroupRefs,
133144
],
134145
},
135146
],

‎examples/plugins/.eslintrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"project": ["examples/plugins/tsconfig.*?.json"]
1515
},
1616
"rules": {
17+
"no-magic-numbers": "off",
1718
"max-lines": "off"
1819
}
1920
},

‎examples/plugins/code-pushup.config.ts

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
import { join } from 'node:path';
12
import {
3+
LIGHTHOUSE_OUTPUT_FILE_DEFAULT,
24
fileSizePlugin,
35
fileSizeRecommendedRefs,
6+
lighthouseCorePerfGroupRefs,
7+
lighthousePlugin,
48
packageJsonDocumentationGroupRef,
59
packageJsonPerformanceGroupRef,
610
packageJsonPlugin,
@@ -32,12 +36,22 @@ const config = {
3236
zod: '^3.22.4',
3337
},
3438
}),
39+
await lighthousePlugin({
40+
url: 'https://staging.code-pushup.dev/login',
41+
outputPath: join('.code-pushup', LIGHTHOUSE_OUTPUT_FILE_DEFAULT),
42+
headless: false,
43+
verbose: true,
44+
}),
3545
],
3646
categories: [
3747
{
3848
slug: 'performance',
3949
title: 'Performance',
40-
refs: [...fileSizeRecommendedRefs, packageJsonPerformanceGroupRef],
50+
refs: [
51+
...fileSizeRecommendedRefs,
52+
packageJsonPerformanceGroupRef,
53+
...lighthouseCorePerfGroupRefs,
54+
],
4155
},
4256
{
4357
slug: 'bug-prevention',

‎examples/plugins/src/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,8 @@ export {
1111
performanceGroupRef as packageJsonPerformanceGroupRef,
1212
} from './package-json/src/scoring';
1313
export { create as packageJsonPlugin } from './package-json/src/package-json.plugin';
14+
export {
15+
create as lighthousePlugin,
16+
LIGHTHOUSE_OUTPUT_FILE_DEFAULT,
17+
corePerfGroupRefs as lighthouseCorePerfGroupRefs,
18+
} from './lighthouse/src/index';

‎examples/plugins/src/lighthouse/README.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# lighthouse-plugin
2+
3+
🕵️ **Code PushUp plugin for Lighthouse reports** 🔥
4+
5+
---
6+
7+
<img alt="Code PushUp plugin for lighthouse reports" src="./docs/images/lighthouse-plugin-cover.png" height="655">
8+
9+
The plugin analyzes a given URL and creates Lighthouse audits.
10+
11+
You can configure the plugin with the following options:
12+
13+
- `url` - target to crawl
14+
- `outputPath` - path to lighthouse report in json format _(optional)_
15+
- `onlyAudits` - list of audits to run _(optional)_
16+
- `verbose` - additional information _(optional)_
17+
- `headless` - run headless _(optional)_
18+
19+
## Getting started
20+
21+
1. If you haven't already, install [@code-pushup/cli](../../../../packages/cli/README.md) and create a configuration file.
22+
23+
2. Copy the [plugin source](./src/) as is into your project
24+
25+
3. Add this plugin to the `plugins` array in your Code PushUp CLI config file (e.g. `code-pushup.config.js`).
26+
27+
Pass in the path on the directory to crawl (relative to `process.cwd()`), as well as patterns and a budget.
28+
29+
```js
30+
import { join } from 'node:path';
31+
import { LIGHTHOUSE_OUTPUT_FILE_DEFAULT } from './lighthouse-plugin.constants';
32+
import lighthousePlugin from './lighthouse.plugin';
33+
34+
export default {
35+
// ...
36+
plugins: [
37+
// ...
38+
lighthousePlugin({
39+
url: 'https://example.com',
40+
outputPath: join('.code-pushup', LIGHTHOUSE_OUTPUT_FILE_DEFAULT),
41+
}),
42+
],
43+
};
44+
```
45+
46+
4. (Optional) Reference audits (or groups) that you wish to include in custom categories (use `npx code-pushup print-config` to list audits and groups).
47+
48+
Assign weights based on what influence each audit and group should have on the overall category score (assign weight 0 to only include it for extra info, without influencing the category score).
49+
50+
```js
51+
import fileSizePlugin, { recommendedRefs as lighthouseRecommendedRefs } from './lighthouse.plugin';
52+
53+
export default {
54+
// ...
55+
categories: [
56+
// ...
57+
{
58+
slug: 'performance',
59+
title: 'Performance',
60+
refs: lighthouseRecommendedRefs,
61+
},
62+
],
63+
};
64+
```
65+
66+
5. Run the CLI with `npx code-pushup collect` and view or upload report (refer to [CLI docs](../../../../packages/cli/README.m)).
67+
68+
## Audits
69+
70+
Detailed information about the audits can be found in the docs of [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/).

‎examples/plugins/src/lighthouse/docs/images/lighthouse-plugin-cover.png

162 KB
Loading

‎examples/plugins/src/lighthouse/mock/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const LIGHTHOUSE_URL = 'https://staging.code-pushup.dev/login';

‎examples/plugins/src/lighthouse/mock/fixtures/lhr.ts

+658
Large diffs are not rendered by default.

‎examples/plugins/src/lighthouse/src/constants.ts

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
/* eslint-disable no-magic-numbers */
2+
import { Audit, CategoryRef, Group } from '@code-pushup/models';
3+
4+
export const LIGHTHOUSE_OUTPUT_FILE_DEFAULT = 'lighthouse-report.json';
5+
export const LIGHTHOUSE_PERFORMANCE_CORE_GROUP_SLUG = 'performance-core';
6+
7+
export const LIGHTHOUSE_REPORT_NAME = 'lighthouse-report.json';
8+
export const PLUGIN_SLUG = 'lighthouse';
9+
10+
export const fcpSlug = 'first-contentful-paint';
11+
export const siSlug = 'speed-index';
12+
export const tbtSlug = 'total-blocking-time';
13+
export const clsSlug = 'cumulative-layout-shift';
14+
export const lcpSlug = 'largest-contentful-paint';
15+
export const audits: Audit[] = [
16+
{
17+
slug: fcpSlug,
18+
title: 'First Contentful Paint',
19+
description:
20+
'First Contentful Paint marks the time at which the first text or image is painted. [Learn more about the First Contentful Paint metric](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/).',
21+
},
22+
{
23+
slug: lcpSlug,
24+
title: 'Largest Contentful Paint',
25+
description:
26+
'Largest Contentful Paint marks the time at which the largest text or image is painted. [Learn more about the Largest Contentful Paint metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)',
27+
},
28+
{
29+
slug: siSlug,
30+
title: 'Speed Index',
31+
description:
32+
'Speed Index shows how quickly the contents of a page are visibly populated. [Learn more about the Speed Index metric](https://developer.chrome.com/docs/lighthouse/performance/speed-index/).',
33+
},
34+
{
35+
slug: tbtSlug,
36+
title: 'Total Blocking Time',
37+
description:
38+
'Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. [Learn more about the Total Blocking Time metric](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/).',
39+
},
40+
{
41+
slug: clsSlug,
42+
title: 'Cumulative Layout Shift',
43+
description:
44+
'Cumulative Layout Shift measures the movement of visible elements within the viewport. [Learn more about the Cumulative Layout Shift metric](https://web.dev/articles/cls).',
45+
},
46+
{
47+
slug: 'server-response-time',
48+
title: 'Initial server response time was short',
49+
description:
50+
'Keep the server response time for the main document short because all other requests depend on it. [Learn more about the Time to First Byte metric](https://developer.chrome.com/docs/lighthouse/performance/time-to-first-byte/).',
51+
},
52+
{
53+
slug: 'interactive',
54+
title: 'Time to Interactive',
55+
description:
56+
'Time to Interactive is the amount of time it takes for the page to become fully interactive. [Learn more about the Time to Interactive metric](https://developer.chrome.com/docs/lighthouse/performance/interactive/).',
57+
},
58+
];
59+
60+
export const corePerfGroupRefs: CategoryRef[] = [
61+
/**
62+
* Lighthouse audits in this group should apply to one of:
63+
* - be included in the [web vitals]()
64+
* - not have a significant impact on our runtime performance or bundle size.
65+
* - be network related [web vitals]()
66+
* - be measurable (especially for performance audits) or have clear pass/fail states.
67+
* - not use 3rd party APIs for completing the audit check.
68+
*/
69+
{
70+
type: 'group',
71+
slug: LIGHTHOUSE_PERFORMANCE_CORE_GROUP_SLUG,
72+
plugin: PLUGIN_SLUG,
73+
weight: 1,
74+
},
75+
];
76+
export const categoryCorePerfGroup: Group = {
77+
slug: LIGHTHOUSE_PERFORMANCE_CORE_GROUP_SLUG,
78+
title: 'performance-core',
79+
refs: [
80+
// web vitals
81+
{
82+
slug: fcpSlug,
83+
weight: 10,
84+
},
85+
{
86+
slug: lcpSlug,
87+
weight: 25,
88+
},
89+
{
90+
slug: tbtSlug,
91+
weight: 30,
92+
},
93+
{
94+
slug: clsSlug,
95+
weight: 25,
96+
},
97+
{
98+
slug: siSlug,
99+
weight: 10,
100+
},
101+
// others
102+
{
103+
slug: 'server-response-time',
104+
weight: 0,
105+
},
106+
{
107+
slug: 'interactive',
108+
weight: 0,
109+
},
110+
{
111+
slug: 'user-timings',
112+
weight: 0,
113+
},
114+
],
115+
};
116+
117+
export const categoryCorePerfGroup2: Group = {
118+
slug: LIGHTHOUSE_PERFORMANCE_CORE_GROUP_SLUG + 2,
119+
title: 'performance-core-2',
120+
refs: [
121+
// web vitals
122+
{
123+
slug: 'first-contentful-paint',
124+
weight: 10,
125+
},
126+
{
127+
slug: 'largest-contentful-paint',
128+
weight: 25,
129+
},
130+
{
131+
slug: 'total-blocking-time',
132+
weight: 30,
133+
},
134+
{
135+
slug: 'cumulative-layout-shift',
136+
weight: 25,
137+
},
138+
{
139+
slug: 'speed-index',
140+
weight: 10,
141+
},
142+
],
143+
};

‎examples/plugins/src/lighthouse/src/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export { create } from './lighthouse.plugin';
2+
export {
3+
LIGHTHOUSE_OUTPUT_FILE_DEFAULT,
4+
corePerfGroupRefs,
5+
PLUGIN_SLUG,
6+
audits,
7+
} from './constants';

0 commit comments

Comments
 (0)