search

cloudinary / frontend-frameworks

Cloudinary javascript frontend frameworks SDKs, including Shared HTML layer, Angular, React and Vue SDKs
https://www.cloudinary.com
MIT License
44 stars 15 forks source link

Add React performance warnings #239

Open atcastle opened 2 weeks ago

atcastle commented 2 weeks ago

Note: This PR is currently a draft and untested, because of a build issue that currently prevents tests from running in the repo. @jerzy-mankowski has said they will address it when they have time. I will revise this PR afterward with a set of passing E2E tests at that time.

This PR includes a draft of 2 new performance warnings for the React AdvancedImage element. Please see the accompanying issue for a full description of the rationale for these two warnings.

The warnings are: warnOnOversizedImage: Logs a warning when an image is loaded, and the intrinsic size is greater than the rendered size by a substantial margin. That margin is defined in OVERSIZE_IMAGE_TOLERANCE and initially set to 500. warnOnLazyLCP: Logs a warning when the PerformanceObserver API detects an image is a candidate for the LCP image but has been loaded with loading=“lazy”.

Both warnings only fire if the NODE_ENV variable is present (true in most React apps) and set to “development”. Both warnings can be silenced if the AdvancedImage element is given an attribute called “silence-warnings”.

jerzy-mankowski commented 1 week ago

@atcastle the build issue has been resolved 👍 just need to fix the typing issues