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 example for why-did-you-render #10662

Merged
merged 6 commits into from Mar 5, 2020

Conversation

motiko
Copy link

@motiko motiko commented Feb 24, 2020

@ijjk
Copy link
Member

ijjk commented Feb 24, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 9s 8.9s -70ms
nodeModulesSize 56.2 MB 56.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 5.05 kB 5.05 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..b61f.js gzip 12.3 kB 12.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.14 kB 4.14 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 9.22 kB 9.22 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 53.2 kB 53.2 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.06 kB 1.06 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 577 B 577 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary motiko/next.js why-you-render-example Change
index.html gzip 923 B 923 B
link.html gzip 933 B 933 B
withRouter.html gzip 922 B 922 B
Overall change 2.78 kB 2.78 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 9.8s 9.7s -144ms
nodeModulesSize 56.2 MB 56.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 5.05 kB 5.05 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..b61f.js gzip 12.3 kB 12.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.14 kB 4.14 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 9.22 kB 9.22 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 53.2 kB 53.2 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.06 kB 1.06 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 577 B 577 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary motiko/next.js why-you-render-example Change
_error.js gzip 290 kB 289 kB -119 B
404.html gzip 1.33 kB 1.33 kB
hooks.html gzip 963 B 963 B
index.js gzip 289 kB 290 kB ⚠️ +565 B
link.js gzip 299 kB 298 kB -1.32 kB
routerDirect.js gzip 296 kB 297 kB ⚠️ +946 B
withRouter.js gzip 297 kB 298 kB ⚠️ +1.04 kB
Overall change 1.47 MB 1.47 MB ⚠️ +1.12 kB

Commit: 6c16d92

@ijjk
Copy link
Member

ijjk commented Feb 25, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 9.9s 10.1s ⚠️ +178ms
nodeModulesSize 56.2 MB 56.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 5.05 kB 5.05 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..b61f.js gzip 12.3 kB 12.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.14 kB 4.14 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 9.22 kB 9.22 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 53.2 kB 53.2 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.06 kB 1.06 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 577 B 577 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary motiko/next.js why-you-render-example Change
index.html gzip 924 B 924 B
link.html gzip 934 B 934 B
withRouter.html gzip 922 B 922 B
Overall change 2.78 kB 2.78 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 10.1s 10.2s ⚠️ +103ms
nodeModulesSize 56.2 MB 56.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 5.05 kB 5.05 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..b61f.js gzip 12.3 kB 12.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.14 kB 4.14 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 9.22 kB 9.22 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 53.2 kB 53.2 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.06 kB 1.06 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.38 kB 7.38 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 577 B 577 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary motiko/next.js why-you-render-example Change
_error.js gzip 289 kB 290 kB ⚠️ +981 B
404.html gzip 1.33 kB 1.33 kB
hooks.html gzip 963 B 963 B
index.js gzip 289 kB 290 kB ⚠️ +392 B
link.js gzip 299 kB 297 kB -1.38 kB
routerDirect.js gzip 298 kB 296 kB -1.38 kB
withRouter.js gzip 296 kB 297 kB ⚠️ +519 B
Overall change 1.47 MB 1.47 MB -873 B

Commit: 489e858

Copy link
Member

@lfades lfades left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @motiko thank you for the PR!

This example is modifying the main entry using custom webpack configuration, let's try to avoid these kind of changes as they may cause unexpected issues, like hydration errors.

Please use a different method or give more information about why does it have to be this way 🙏

@motiko
Copy link
Author

motiko commented Feb 27, 2020

This is a plugin for profiling react applications.
We have to load it only in dev mode and only on client side.

if (dev && !isServer) {

Additionally it has to load before any react component. Because it works its magic inside react library see whyDidYouRender.js

whyDidYouRender(React)

I'm not aware of another place where we can load a file with that conditions.
Do you have any suggestions?

@ijjk
Copy link
Member

ijjk commented Feb 27, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 9.9s 10.1s ⚠️ +239ms
nodeModulesSize 56.2 MB 56.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 4.98 kB 4.98 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..b61f.js gzip 12.3 kB 12.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.1 kB 57.1 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.1 kB 4.1 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 9.22 kB 9.22 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 53.2 kB 53.2 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.4 kB 7.4 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary motiko/next.js why-you-render-example Change
index.html gzip 925 B 925 B
link.html gzip 935 B 935 B
withRouter.html gzip 924 B 924 B
Overall change 2.78 kB 2.78 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 11s 10.8s -252ms
nodeModulesSize 56.2 MB 56.2 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 4.98 kB 4.98 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..b61f.js gzip 12.3 kB 12.3 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.1 kB 57.1 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.1 kB 4.1 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 9.22 kB 9.22 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 53.2 kB 53.2 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.4 kB 7.4 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary motiko/next.js why-you-render-example Change
_error.js gzip 292 kB 292 kB -80 B
404.html gzip 1.33 kB 1.33 kB
hooks.html gzip 965 B 965 B
index.js gzip 292 kB 292 kB -197 B
link.js gzip 300 kB 300 kB -18 B
routerDirect.js gzip 298 kB 298 kB ⚠️ +557 B
withRouter.js gzip 298 kB 298 kB -142 B
Overall change 1.48 MB 1.48 MB ⚠️ +120 B

Commit: 71cf5da

@vzaidman
Copy link
Contributor

vzaidman commented Feb 28, 2020

I had this exact configuration on a huge next.js project i manage for over an year now and it never caused any problems. It's indeed an advanced use-case, but it might be very useful to a lot of people.

@timneutkens
Copy link
Member

timneutkens commented Feb 28, 2020

I think you can just add

import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

if(typeof window !== 'undefined') {
  whyDidYouRender(React);
}

To _app.js? It'd be executed before Next.js starts rendering.

@motiko
Copy link
Author

motiko commented Feb 28, 2020

This would work except the the check for dev environment.
What would be the recommended way to distinguish?
Is process.env.NODE_ENV ok?
Anyway see my last commit with suggested changes, thank you 🙏

To avoid custom webpack main entry modifications
as this can cause [hydration errors](vercel#10662 (review))
@ijjk
Copy link
Member

ijjk commented Feb 28, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 8.9s 9s ⚠️ +188ms
nodeModulesSize 56.3 MB 56.3 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 4.98 kB 4.98 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 54.6 kB 54.6 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.1 kB 4.1 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 50.6 kB 50.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary motiko/next.js why-you-render-example Change
index.html gzip 924 B 924 B
link.html gzip 932 B 932 B
withRouter.html gzip 923 B 923 B
Overall change 2.78 kB 2.78 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 9.2s 9.4s ⚠️ +207ms
nodeModulesSize 56.3 MB 56.3 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 4.98 kB 4.98 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 54.6 kB 54.6 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.1 kB 4.1 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 50.6 kB 50.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary motiko/next.js why-you-render-example Change
_error.js gzip 292 kB 292 kB ⚠️ +22 B
404.html gzip 1.33 kB 1.33 kB
hooks.html gzip 964 B 964 B
index.js gzip 292 kB 292 kB -445 B
link.js gzip 299 kB 299 kB ⚠️ +182 B
routerDirect.js gzip 299 kB 298 kB -1.29 kB
withRouter.js gzip 298 kB 299 kB ⚠️ +1.06 kB
Overall change 1.48 MB 1.48 MB -466 B

Commit: 5041fcf

@lfades
Copy link
Member

lfades commented Feb 28, 2020

@motiko That should do it, webpack should remove that code and the import from the final build, can you confirm that?

@ijjk
Copy link
Member

ijjk commented Feb 28, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 9s 9.3s ⚠️ +321ms
nodeModulesSize 56.3 MB 56.3 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 4.98 kB 4.98 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 54.6 kB 54.6 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.1 kB 4.1 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 50.6 kB 50.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary motiko/next.js why-you-render-example Change
index.html gzip 923 B 923 B
link.html gzip 931 B 931 B
withRouter.html gzip 922 B 922 B
Overall change 2.78 kB 2.78 kB

Serverless Mode (Increase detected ⚠️)
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 10.1s 10.1s ⚠️ +7ms
nodeModulesSize 56.3 MB 56.3 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 4.98 kB 4.98 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..7030.js gzip 9.68 kB 9.68 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 54.6 kB 54.6 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.1 kB 4.1 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.63 kB 6.63 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 50.6 kB 50.6 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.07 kB 1.07 kB
_error.js gzip 2.98 kB 2.98 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.9 kB 1.9 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.39 kB 7.39 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.08 kB 2.08 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.27 kB 5.27 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary motiko/next.js why-you-render-example Change
_error.js gzip 292 kB 292 kB ⚠️ +786 B
404.html gzip 1.33 kB 1.33 kB
hooks.html gzip 963 B 963 B
index.js gzip 292 kB 293 kB ⚠️ +633 B
link.js gzip 300 kB 299 kB -394 B
routerDirect.js gzip 298 kB 298 kB ⚠️ +669 B
withRouter.js gzip 298 kB 299 kB ⚠️ +1.31 kB
Overall change 1.48 MB 1.48 MB ⚠️ +3 kB

Commit: ad5aca1

@motiko
Copy link
Author

motiko commented Feb 28, 2020

@motiko That should do it, webpack should remove that code and the import from the final build, can you confirm that?

Where can i find that inside .next/ ?
I can see that the code did not run, but how do i verify the import has been removed?

@motiko
Copy link
Author

motiko commented Mar 5, 2020

@timneutkens @lfades other changes still required? or can it be merged?

@ijjk
Copy link
Member

ijjk commented Mar 5, 2020

Stats from current PR

Default Server Mode
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 9.6s 9.6s -44ms
nodeModulesSize 56.5 MB 56.5 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..23c3.js gzip 9.72 kB 9.72 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.66 kB 6.66 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.3 kB 51.3 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.08 kB 1.08 kB
_error.js gzip 2.96 kB 2.96 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.37 kB 7.37 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.06 kB 2.06 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary motiko/next.js why-you-render-example Change
index.html gzip 917 B 917 B
link.html gzip 926 B 926 B
withRouter.html gzip 915 B 915 B
Overall change 2.76 kB 2.76 kB

Serverless Mode (Decrease detected ✓)
General
zeit/next.js canary motiko/next.js why-you-render-example Change
buildDuration 10.4s 10.4s -6ms
nodeModulesSize 56.5 MB 56.5 MB
Client Bundles (main, webpack, commons)
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.js gzip 5.77 kB 5.77 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..23c3.js gzip 9.72 kB 9.72 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 55.4 kB 55.4 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
main-HASH.module.js gzip 4.79 kB 4.79 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.66 kB 6.66 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 51.3 kB 51.3 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary motiko/next.js why-you-render-example Change
polyfills-HASH.js gzip 18.9 kB 18.9 kB
Overall change 18.9 kB 18.9 kB
Client Pages
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.js gzip 1.08 kB 1.08 kB
_error.js gzip 2.96 kB 2.96 kB
hooks.js gzip 664 B 664 B
index.js gzip 222 B 222 B
link.js gzip 1.89 kB 1.89 kB
routerDirect.js gzip 279 B 279 B
withRouter.js gzip 278 B 278 B
Overall change 7.37 kB 7.37 kB
Client Pages Modern
zeit/next.js canary motiko/next.js why-you-render-example Change
_app.module.js gzip 589 B 589 B
_error.module.js gzip 2.06 kB 2.06 kB
hooks.module.js gzip 370 B 370 B
index.module.js gzip 212 B 212 B
link.module.js gzip 1.48 kB 1.48 kB
routerDirect..dule.js gzip 271 B 271 B
withRouter.m..dule.js gzip 270 B 270 B
Overall change 5.26 kB 5.26 kB
Client Build Manifests
zeit/next.js canary motiko/next.js why-you-render-example Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall decrease ✓
zeit/next.js canary motiko/next.js why-you-render-example Change
_error.js gzip 292 kB 292 kB -87 B
404.html gzip 1.32 kB 1.32 kB
hooks.html gzip 958 B 958 B
index.js gzip 293 kB 292 kB -1.08 kB
link.js gzip 299 kB 299 kB ⚠️ +38 B
routerDirect.js gzip 298 kB 298 kB ⚠️ +47 B
withRouter.js gzip 298 kB 298 kB ⚠️ +94 B
Overall change 1.48 MB 1.48 MB -989 B

@timneutkens timneutkens merged commit 744b50d into vercel:canary Mar 5, 2020
@timneutkens
Copy link
Member

Thanks for the updates 💯looks good now!

ijjk pushed a commit to ijjk/next.js that referenced this pull request Mar 6, 2020
* add example for why-did-you-render

* Load whyDidYouRender from _app.js

To avoid custom webpack main entry modifications
as this can cause [hydration errors](vercel#10662 (review))
chibicode pushed a commit to chibicode/next.js that referenced this pull request Mar 6, 2020
* add example for why-did-you-render

* Load whyDidYouRender from _app.js

To avoid custom webpack main entry modifications
as this can cause [hydration errors](vercel#10662 (review))
@Vadorequest
Copy link
Contributor

Apparently, this doesn't work since recent versions of Next.js. See welldone-software/why-did-you-render#84

@lfades
Copy link
Member

lfades commented May 26, 2020

@Vadorequest Feel free to create a PR to fix it 🙏

@vzaidman
Copy link
Contributor

@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants