Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add layout to data-nimg attribute #28312

Merged
merged 1 commit into from Aug 20, 2021

Conversation

atcastle
Copy link
Collaborator

This PR is just a small change to add the layout to the nimg data attribute on the image component. Currently this renders as data-nimg=true so this won't increase page sizes.

@ijjk ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Aug 19, 2021
@ijjk
Copy link
Member

ijjk commented Aug 19, 2021

Stats from current PR

Default Build (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
buildDuration 16.6s 16.4s -265ms
buildDurationCached 3.7s 4.1s ⚠️ +390ms
nodeModulesSize 61.4 MB 61.4 MB ⚠️ +24 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
/ failed reqs 0 0
/ total time (seconds) 3.001 2.986 -0.01
/ avg req/sec 833.19 837.24 +4.05
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.752 1.819 ⚠️ +0.07
/error-in-render avg req/sec 1427.31 1374.37 ⚠️ -52.94
Client Bundles (main, webpack, commons)
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
745.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.2 kB 42.2 kB
main-HASH.js gzip 23.2 kB 23.2 kB
webpack-HASH.js gzip 1.45 kB 1.45 kB
Overall change 67.1 kB 67.1 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
polyfills-a4..dd70.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
_app-HASH.js gzip 979 B 979 B
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 312 B 312 B
css-HASH.js gzip 329 B 329 B
dynamic-HASH.js gzip 2.67 kB 2.67 kB
head-HASH.js gzip 351 B 351 B
hooks-HASH.js gzip 918 B 918 B
image-HASH.js gzip 4.14 kB 4.14 kB
index-HASH.js gzip 261 B 261 B
link-HASH.js gzip 1.66 kB 1.66 kB
routerDirect..HASH.js gzip 318 B 318 B
script-HASH.js gzip 387 B 387 B
withRouter-HASH.js gzip 320 B 320 B
bb14e60e810b..30f.css gzip 125 B 125 B
Overall change 13 kB 13 kB
Client Build Manifests
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
_buildManifest.js gzip 491 B 491 B
Overall change 491 B 491 B
Rendered Page Sizes
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
index.html gzip 541 B 541 B
link.html gzip 553 B 553 B
withRouter.html gzip 534 B 534 B
Overall change 1.63 kB 1.63 kB

Diffs

Diff for _buildManifest.js
@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-f6efb8a484d4a96e150c.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-474b709f83960ad881c7.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-16bdd752b8e3d0e36706.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f62bdaa581311495bb85.js"],
   "/routerDirect": [
Diff for image-HASH.js
@@ -643,7 +643,7 @@
             "img",
             Object.assign({}, rest, imgAttributes, {
               decoding: "async",
-              "data-nimg": true,
+              "data-nimg": layout,
               className: className,
               ref: function ref(img) {
                 setRef(img);
@@ -677,7 +677,7 @@
                 }),
                 {
                   decoding: "async",
-                  "data-nimg": true,
+                  "data-nimg": layout,
                   style: imgStyle,
                   className: className,
                   loading: loading || "lazy"

Webpack 4 Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
buildDuration 13.6s 13.6s -58ms
buildDurationCached 5.7s 5.4s -265ms
nodeModulesSize 61.4 MB 61.4 MB ⚠️ +24 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
/ failed reqs 0 0
/ total time (seconds) 3.082 3.084 0
/ avg req/sec 811.09 810.63 ⚠️ -0.46
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.882 1.903 ⚠️ +0.02
/error-in-render avg req/sec 1328.12 1313.72 ⚠️ -14.4
Client Bundles (main, webpack, commons)
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
16.HASH.js gzip 186 B 186 B
677f882d2ed8..HASH.js gzip 14.1 kB 14.1 kB
framework.HASH.js gzip 41.9 kB 41.9 kB
main-HASH.js gzip 10.6 kB 10.6 kB
webpack-HASH.js gzip 1.19 kB 1.19 kB
Overall change 68 kB 68 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
polyfills-a4..dd70.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
_app-HASH.js gzip 964 B 964 B
_error-HASH.js gzip 3.8 kB 3.8 kB
amp-HASH.js gzip 552 B 552 B
css-HASH.js gzip 333 B 333 B
dynamic-HASH.js gzip 2.87 kB 2.87 kB
head-HASH.js gzip 3.06 kB 3.06 kB
hooks-HASH.js gzip 924 B 924 B
index-HASH.js gzip 231 B 231 B
link-HASH.js gzip 1.64 kB 1.64 kB
routerDirect..HASH.js gzip 298 B 298 B
script-HASH.js gzip 2.98 kB 2.98 kB
withRouter-HASH.js gzip 295 B 295 B
30809af5c834..565.css gzip 125 B 125 B
Overall change 18.1 kB 18.1 kB
Client Build Manifests
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
_buildManifest.js gzip 500 B 500 B
Overall change 500 B 500 B
Rendered Page Sizes
vercel/next.js canary atcastle/next.js augment-nimg-attribute Change
index.html gzip 585 B 585 B
link.html gzip 597 B 597 B
withRouter.html gzip 577 B 577 B
Overall change 1.76 kB 1.76 kB
Commit: e6d05f7

@ijjk
Copy link
Member

ijjk commented Aug 19, 2021

Failing test suites

Commit: e6d05f7

test/acceptance/ReactRefreshLogBox.dev.test.js

  • render error not shown right after syntax error

Expand output

● render error not shown right after syntax error

Application is in inconsistent state: timeout.

   95 |           }
   96 |           if (status !== 'pending') {
>  97 |             throw new Error(`Application is in inconsistent state: ${status}.`)
      |                   ^
   98 |           }
   99 |
  100 |           await new Promise((resolve) => setTimeout(resolve, 30))

  at Object.patch (acceptance/helpers.js:97:19)
      at runMicrotasks (<anonymous>)
  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:238:3)

@timneutkens timneutkens merged commit a0f64ba into vercel:canary Aug 20, 2021
kodiakhq bot pushed a commit that referenced this pull request Aug 24, 2021
…28444)

Adds tests to the Image component to verify that the correct data is being exposed.
Based on #27899 and #28312

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants