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
Conversation
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
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 | |
link.js gzip | 299 kB | 298 kB | -1.32 kB |
routerDirect.js gzip | 296 kB | 297 kB | |
withRouter.js gzip | 297 kB | 298 kB | |
Overall change | 1.47 MB | 1.47 MB |
Commit: 6c16d92
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
Commit: 489e858 |
There was a problem hiding this 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 🙏
This is a plugin for profiling react applications.
Additionally it has to load before any react component. Because it works its magic inside react library see
I'm not aware of another place where we can load a file with that conditions. |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
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 | |
withRouter.js gzip | 298 kB | 298 kB | -142 B |
Overall change | 1.48 MB | 1.48 MB |
Commit: 71cf5da
I had this exact configuration on a huge |
I think you can just add
To |
This would work except the the check for dev environment. |
To avoid custom webpack main entry modifications as this can cause [hydration errors](vercel#10662 (review))
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
Commit: 5041fcf |
@motiko That should do it, webpack should remove that code and the import from the final build, can you confirm that? |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Increase detected
|
zeit/next.js canary | motiko/next.js why-you-render-example | Change | |
---|---|---|---|
buildDuration | 10.1s | 10.1s | |
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 | |
404.html gzip | 1.33 kB | 1.33 kB | ✓ |
hooks.html gzip | 963 B | 963 B | ✓ |
index.js gzip | 292 kB | 293 kB | |
link.js gzip | 300 kB | 299 kB | -394 B |
routerDirect.js gzip | 298 kB | 298 kB | |
withRouter.js gzip | 298 kB | 299 kB | |
Overall change | 1.48 MB | 1.48 MB |
Commit: ad5aca1
Where can i find that inside |
@timneutkens @lfades other changes still required? or can it be merged? |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless Mode (Decrease detected ✓)General
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Legacy Client Bundles (polyfills)
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles Overall decrease ✓
|
Thanks for the updates 💯looks good now! |
* 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))
* 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))
Apparently, this doesn't work since recent versions of Next.js. See welldone-software/why-did-you-render#84 |
@Vadorequest Feel free to create a PR to fix it 🙏 |
As described here welldone-software/why-did-you-render#84