diff --git a/core/lib/stack-packs.js b/core/lib/stack-packs.js
index a72e51bc7461..c37df00f9ae1 100644
--- a/core/lib/stack-packs.js
+++ b/core/lib/stack-packs.js
@@ -117,7 +117,11 @@ function getStackPacks(pageStacks) {
});
}
- return packs;
+ return packs.sort((a, b) => {
+ const aVal = stackPacksToInclude.findIndex(p => p.packId === a.id);
+ const bVal = stackPacksToInclude.findIndex(p => p.packId === b.id);
+ return aVal - bVal;
+ });
}
export {
diff --git a/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json b/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json
index 71e63fb80294..fa64b7813337 100644
--- a/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json
+++ b/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json
@@ -4240,20 +4240,6 @@
}
},
"stackPacks": [
- {
- "id": "react",
- "title": "React",
- "iconDataURL": "data:image/svg+xml,",
- "descriptions": {
- "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
- "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
- "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).",
- "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).",
- "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).",
- "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)",
- "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance."
- }
- },
{
"id": "next.js",
"title": "Next.js",
@@ -4272,6 +4258,20 @@
"prioritize-lcp-image": "Use the `next/image` component and set \"priority\" to true to preload LCP image. [Learn more](https://nextjs.org/docs/api-reference/next/image#priority).",
"unsized-images": "Use the `next/image` component to make sure images are always sized appropriately. [Learn more](https://nextjs.org/docs/api-reference/next/image#width)."
}
+ },
+ {
+ "id": "react",
+ "title": "React",
+ "iconDataURL": "data:image/svg+xml,",
+ "descriptions": {
+ "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
+ "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
+ "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).",
+ "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).",
+ "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).",
+ "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)",
+ "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance."
+ }
}
],
"entities": [
@@ -7686,62 +7686,62 @@
"core/config/default-config.js | bestPracticesGeneralGroupTitle": [
"categoryGroups[best-practices-general].title"
],
- "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [
- "stackPacks[0].descriptions[unminified-css]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [
- "stackPacks[0].descriptions[unminified-javascript]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [
- "stackPacks[0].descriptions[unused-javascript]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [
- "stackPacks[0].descriptions[server-response-time]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [
- "stackPacks[0].descriptions.redirects"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [
- "stackPacks[0].descriptions[user-timings]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [
- "stackPacks[0].descriptions[dom-size]"
- ],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unused-css-rules": [
- "stackPacks[1].descriptions[unused-css-rules]"
+ "stackPacks[0].descriptions[unused-css-rules]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | modern-image-formats": [
- "stackPacks[1].descriptions[modern-image-formats]"
+ "stackPacks[0].descriptions[modern-image-formats]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | offscreen-images": [
- "stackPacks[1].descriptions[offscreen-images]"
+ "stackPacks[0].descriptions[offscreen-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | render-blocking-resources": [
- "stackPacks[1].descriptions[render-blocking-resources]"
+ "stackPacks[0].descriptions[render-blocking-resources]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unused-javascript": [
- "stackPacks[1].descriptions[unused-javascript]"
+ "stackPacks[0].descriptions[unused-javascript]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-long-cache-ttl": [
- "stackPacks[1].descriptions[uses-long-cache-ttl]"
+ "stackPacks[0].descriptions[uses-long-cache-ttl]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-optimized-images": [
- "stackPacks[1].descriptions[uses-optimized-images]"
+ "stackPacks[0].descriptions[uses-optimized-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-text-compression": [
- "stackPacks[1].descriptions[uses-text-compression]"
+ "stackPacks[0].descriptions[uses-text-compression]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-responsive-images": [
- "stackPacks[1].descriptions[uses-responsive-images]"
+ "stackPacks[0].descriptions[uses-responsive-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | user-timings": [
- "stackPacks[1].descriptions[user-timings]"
+ "stackPacks[0].descriptions[user-timings]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | prioritize-lcp-image": [
- "stackPacks[1].descriptions[prioritize-lcp-image]"
+ "stackPacks[0].descriptions[prioritize-lcp-image]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unsized-images": [
- "stackPacks[1].descriptions[unsized-images]"
+ "stackPacks[0].descriptions[unsized-images]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [
+ "stackPacks[1].descriptions[unminified-css]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [
+ "stackPacks[1].descriptions[unminified-javascript]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [
+ "stackPacks[1].descriptions[unused-javascript]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [
+ "stackPacks[1].descriptions[server-response-time]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [
+ "stackPacks[1].descriptions.redirects"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [
+ "stackPacks[1].descriptions[user-timings]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [
+ "stackPacks[1].descriptions[dom-size]"
]
}
}
@@ -14367,20 +14367,6 @@
}
},
"stackPacks": [
- {
- "id": "react",
- "title": "React",
- "iconDataURL": "data:image/svg+xml,",
- "descriptions": {
- "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
- "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
- "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).",
- "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).",
- "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).",
- "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)",
- "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance."
- }
- },
{
"id": "next.js",
"title": "Next.js",
@@ -14399,6 +14385,20 @@
"prioritize-lcp-image": "Use the `next/image` component and set \"priority\" to true to preload LCP image. [Learn more](https://nextjs.org/docs/api-reference/next/image#priority).",
"unsized-images": "Use the `next/image` component to make sure images are always sized appropriately. [Learn more](https://nextjs.org/docs/api-reference/next/image#width)."
}
+ },
+ {
+ "id": "react",
+ "title": "React",
+ "iconDataURL": "data:image/svg+xml,",
+ "descriptions": {
+ "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
+ "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
+ "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).",
+ "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).",
+ "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).",
+ "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)",
+ "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance."
+ }
}
],
"fullPageScreenshot": {
@@ -16322,62 +16322,62 @@
"core/config/default-config.js | bestPracticesGeneralGroupTitle": [
"categoryGroups[best-practices-general].title"
],
- "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [
- "stackPacks[0].descriptions[unminified-css]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [
- "stackPacks[0].descriptions[unminified-javascript]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [
- "stackPacks[0].descriptions[unused-javascript]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [
- "stackPacks[0].descriptions[server-response-time]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [
- "stackPacks[0].descriptions.redirects"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [
- "stackPacks[0].descriptions[user-timings]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [
- "stackPacks[0].descriptions[dom-size]"
- ],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unused-css-rules": [
- "stackPacks[1].descriptions[unused-css-rules]"
+ "stackPacks[0].descriptions[unused-css-rules]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | modern-image-formats": [
- "stackPacks[1].descriptions[modern-image-formats]"
+ "stackPacks[0].descriptions[modern-image-formats]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | offscreen-images": [
- "stackPacks[1].descriptions[offscreen-images]"
+ "stackPacks[0].descriptions[offscreen-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | render-blocking-resources": [
- "stackPacks[1].descriptions[render-blocking-resources]"
+ "stackPacks[0].descriptions[render-blocking-resources]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unused-javascript": [
- "stackPacks[1].descriptions[unused-javascript]"
+ "stackPacks[0].descriptions[unused-javascript]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-long-cache-ttl": [
- "stackPacks[1].descriptions[uses-long-cache-ttl]"
+ "stackPacks[0].descriptions[uses-long-cache-ttl]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-optimized-images": [
- "stackPacks[1].descriptions[uses-optimized-images]"
+ "stackPacks[0].descriptions[uses-optimized-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-text-compression": [
- "stackPacks[1].descriptions[uses-text-compression]"
+ "stackPacks[0].descriptions[uses-text-compression]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-responsive-images": [
- "stackPacks[1].descriptions[uses-responsive-images]"
+ "stackPacks[0].descriptions[uses-responsive-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | user-timings": [
- "stackPacks[1].descriptions[user-timings]"
+ "stackPacks[0].descriptions[user-timings]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | prioritize-lcp-image": [
- "stackPacks[1].descriptions[prioritize-lcp-image]"
+ "stackPacks[0].descriptions[prioritize-lcp-image]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unsized-images": [
- "stackPacks[1].descriptions[unsized-images]"
+ "stackPacks[0].descriptions[unsized-images]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [
+ "stackPacks[1].descriptions[unminified-css]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [
+ "stackPacks[1].descriptions[unminified-javascript]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [
+ "stackPacks[1].descriptions[unused-javascript]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [
+ "stackPacks[1].descriptions[server-response-time]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [
+ "stackPacks[1].descriptions.redirects"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [
+ "stackPacks[1].descriptions[user-timings]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [
+ "stackPacks[1].descriptions[dom-size]"
]
}
}
@@ -20642,20 +20642,6 @@
}
},
"stackPacks": [
- {
- "id": "react",
- "title": "React",
- "iconDataURL": "data:image/svg+xml,",
- "descriptions": {
- "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
- "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
- "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).",
- "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).",
- "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).",
- "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)",
- "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance."
- }
- },
{
"id": "next.js",
"title": "Next.js",
@@ -20674,6 +20660,20 @@
"prioritize-lcp-image": "Use the `next/image` component and set \"priority\" to true to preload LCP image. [Learn more](https://nextjs.org/docs/api-reference/next/image#priority).",
"unsized-images": "Use the `next/image` component to make sure images are always sized appropriately. [Learn more](https://nextjs.org/docs/api-reference/next/image#width)."
}
+ },
+ {
+ "id": "react",
+ "title": "React",
+ "iconDataURL": "data:image/svg+xml,",
+ "descriptions": {
+ "unminified-css": "If your build system minifies CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
+ "unminified-javascript": "If your build system minifies JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. [Learn more](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build).",
+ "unused-javascript": "If you are not server-side rendering, [split your JavaScript bundles](https://web.dev/code-splitting-suspense/) with `React.lazy()`. Otherwise, code-split using a third-party library such as [loadable-components](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/).",
+ "server-response-time": "If you are server-side rendering any React components, consider using `renderToPipeableStream()` or `renderToStaticNodeStream()` to allow the client to receive and hydrate different parts of the markup instead of all at once. [Learn more](https://reactjs.org/docs/react-dom-server.html#renderToPipeableStream).",
+ "redirects": "If you are using React Router, minimize usage of the `` component for [route navigations](https://reacttraining.com/react-router/web/api/Redirect).",
+ "user-timings": "Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. [Learn more.](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)",
+ "dom-size": "Consider using a \"windowing\" library like `react-window` to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. [Learn more](https://web.dev/virtualize-long-lists-react-window/). Also, minimize unnecessary re-renders using [`shouldComponentUpdate`](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action), [`PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent), or [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) and [skip effects](https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) only until certain dependencies have changed if you are using the `Effect` hook to improve runtime performance."
+ }
}
],
"entities": [
@@ -24078,62 +24078,62 @@
"core/config/default-config.js | bestPracticesGeneralGroupTitle": [
"categoryGroups[best-practices-general].title"
],
- "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [
- "stackPacks[0].descriptions[unminified-css]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [
- "stackPacks[0].descriptions[unminified-javascript]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [
- "stackPacks[0].descriptions[unused-javascript]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [
- "stackPacks[0].descriptions[server-response-time]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [
- "stackPacks[0].descriptions.redirects"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [
- "stackPacks[0].descriptions[user-timings]"
- ],
- "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [
- "stackPacks[0].descriptions[dom-size]"
- ],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unused-css-rules": [
- "stackPacks[1].descriptions[unused-css-rules]"
+ "stackPacks[0].descriptions[unused-css-rules]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | modern-image-formats": [
- "stackPacks[1].descriptions[modern-image-formats]"
+ "stackPacks[0].descriptions[modern-image-formats]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | offscreen-images": [
- "stackPacks[1].descriptions[offscreen-images]"
+ "stackPacks[0].descriptions[offscreen-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | render-blocking-resources": [
- "stackPacks[1].descriptions[render-blocking-resources]"
+ "stackPacks[0].descriptions[render-blocking-resources]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unused-javascript": [
- "stackPacks[1].descriptions[unused-javascript]"
+ "stackPacks[0].descriptions[unused-javascript]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-long-cache-ttl": [
- "stackPacks[1].descriptions[uses-long-cache-ttl]"
+ "stackPacks[0].descriptions[uses-long-cache-ttl]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-optimized-images": [
- "stackPacks[1].descriptions[uses-optimized-images]"
+ "stackPacks[0].descriptions[uses-optimized-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-text-compression": [
- "stackPacks[1].descriptions[uses-text-compression]"
+ "stackPacks[0].descriptions[uses-text-compression]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | uses-responsive-images": [
- "stackPacks[1].descriptions[uses-responsive-images]"
+ "stackPacks[0].descriptions[uses-responsive-images]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | user-timings": [
- "stackPacks[1].descriptions[user-timings]"
+ "stackPacks[0].descriptions[user-timings]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | prioritize-lcp-image": [
- "stackPacks[1].descriptions[prioritize-lcp-image]"
+ "stackPacks[0].descriptions[prioritize-lcp-image]"
],
"node_modules/lighthouse-stack-packs/packs/next.js.js | unsized-images": [
- "stackPacks[1].descriptions[unsized-images]"
+ "stackPacks[0].descriptions[unsized-images]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unminified-css": [
+ "stackPacks[1].descriptions[unminified-css]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unminified-javascript": [
+ "stackPacks[1].descriptions[unminified-javascript]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | unused-javascript": [
+ "stackPacks[1].descriptions[unused-javascript]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | server-response-time": [
+ "stackPacks[1].descriptions[server-response-time]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | redirects": [
+ "stackPacks[1].descriptions.redirects"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | user-timings": [
+ "stackPacks[1].descriptions[user-timings]"
+ ],
+ "node_modules/lighthouse-stack-packs/packs/react.js | dom-size": [
+ "stackPacks[1].descriptions[dom-size]"
]
}
}
diff --git a/core/test/lib/stack-packs-test.js b/core/test/lib/stack-packs-test.js
index b15985e36590..1c563605c52c 100644
--- a/core/test/lib/stack-packs-test.js
+++ b/core/test/lib/stack-packs-test.js
@@ -7,7 +7,7 @@
import lighthouseStackPacksDep from 'lighthouse-stack-packs';
import {initializeConfig} from '../../config/config.js';
-import {stackPacksToInclude} from '../../lib/stack-packs.js';
+import {stackPacksToInclude, getStackPacks} from '../../lib/stack-packs.js';
async function getAuditIds() {
const {resolvedConfig} = await initializeConfig('navigation');
@@ -21,6 +21,27 @@ describe('stack-packs lib', () => {
.map(p => p.id);
expect(result).toEqual([]);
});
+
+ it('returns packs from page stacks', () => {
+ expect(getStackPacks([])).toEqual([]);
+ expect(getStackPacks([{detector: 'js', id: 'i-dont-know-you'}])).toEqual([]);
+
+ const packs = getStackPacks([
+ {detector: 'js', id: 'wordpress'},
+ {detector: 'js', id: 'react'},
+ ]);
+
+ expect(packs.map(pack => pack.id)).toEqual(['wordpress', 'react']);
+ });
+
+ it('returns packs from page stacks in order defined by us', () => {
+ const packs = getStackPacks([
+ {detector: 'js', id: 'react'},
+ {detector: 'js', id: 'wordpress'},
+ ]);
+
+ expect(packs.map(pack => pack.id)).toEqual(['wordpress', 'react']);
+ });
});
// These tests summarize the contents of the lighthouse-stack-packs package.