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.

Sign up for GitHub

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

Jump to bottom

docs: adjust custom polyfill suggestion #13766

Merged
merged 2 commits into from
Jun 4, 2020
Merged

docs: adjust custom polyfill suggestion #13766

merged 2 commits into from
Jun 4, 2020

Conversation

Timer
Copy link
Member

@Timer Timer commented Jun 4, 2020 •
edited

The current with-polyfills example is not the suggested way to add polyfills and is known to cause issues with bundling.

The proper way to load polyfills is to include them as the first line in pages/_app.js, which I've updated the docs to say.

@Timer Timer added this to the 9.4.5 milestone Jun 4, 2020
@ijjk
Copy link
Member

ijjk commented Jun 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
buildDuration 11.9s 11.9s ⚠️ +65ms
nodeModulesSize 66 MB 66 MB ✓
Page Load Tests Overall increase ✓
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.012 2.03 ⚠️ +0.02
/ avg req/sec 1242.47 1231.48 -10.99
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.204 1.151 -0.05
/error-in-render avg req/sec 2075.56 2172.68 ⚠️ +97.12
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..6c2a.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.module.js gzip 5.67 kB 5.67 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.93 kB 6.93 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.21 kB 8.21 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.51 kB 1.51 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.32 kB 5.32 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill 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
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill 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
General
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
buildDuration 13.4s 13.3s -43ms
nodeModulesSize 66 MB 66 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..6c2a.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.module.js gzip 5.67 kB 5.67 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.93 kB 6.93 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.21 kB 8.21 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.51 kB 1.51 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.32 kB 5.32 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_error.js 878 kB 878 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.81 kB 3.81 kB ✓
index.js 879 kB 879 kB ✓
link.js 916 kB 916 kB ✓
routerDirect.js 909 kB 909 kB ✓
withRouter.js 909 kB 909 kB ✓
Overall change 4.5 MB 4.5 MB ✓

@ijjk
Copy link
Member

ijjk commented Jun 4, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
buildDuration 12.1s 12.2s ⚠️ +99ms
nodeModulesSize 66 MB 66 MB ✓
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.056 2.08 ⚠️ +0.02
/ avg req/sec 1215.86 1201.7 -14.16
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.153 1.262 ⚠️ +0.11
/error-in-render avg req/sec 2167.86 1980.58 -187.28
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..6c2a.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.module.js gzip 5.67 kB 5.67 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.93 kB 6.93 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.21 kB 8.21 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.51 kB 1.51 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.32 kB 5.32 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill 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
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill 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
General
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
buildDuration 13.2s 13.2s ✓
nodeModulesSize 66 MB 66 MB ✓
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.js gzip 6.59 kB 6.59 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..6c2a.js gzip 10.5 kB 10.5 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
main-HASH.module.js gzip 5.67 kB 5.67 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.93 kB 6.93 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.js gzip 1.26 kB 1.26 kB ✓
_error.js gzip 3.25 kB 3.25 kB ✓
hooks.js gzip 881 B 881 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.05 kB 2.05 kB ✓
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 8.21 kB 8.21 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_app.module.js gzip 604 B 604 B ✓
_error.module.js gzip 2.04 kB 2.04 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.51 kB 1.51 kB ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.32 kB 5.32 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js docs/adjust-custom-polyfill Change
_error.js 878 kB 878 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.81 kB 3.81 kB ✓
index.js 879 kB 879 kB ✓
link.js 916 kB 916 kB ✓
routerDirect.js 909 kB 909 kB ✓
withRouter.js 909 kB 909 kB ✓
Overall change 4.5 MB 4.5 MB ✓

@kodiakhq kodiakhq bot merged commit 7d9b331 into vercel:canary Jun 4, 2020
@Timer Timer deleted the docs/adjust-custom-polyfill branch June 4, 2020 16:50
@chibicode chibicode mentioned this pull request Jun 4, 2020
Merged
@karlhorky karlhorky mentioned this pull request Jun 9, 2020
Merged
@karlhorky
Copy link
Contributor

Added a warning in the readme for the with-polyfill pointing to these recommendations: #13943

rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@Timer @rokinsky
docs: adjust custom polyfill suggestion (vercel#13766)
d993e4d 
The current [with-polyfills](https://github.com/vercel/next.js/blob/canary/examples/with-polyfills/) example is not the suggested way to add polyfills and is known to cause issues with bundling.

The proper way to load polyfills is to include them as the first line in `pages/_app.js`, which I've updated the docs to say.
Timer added a commit that referenced this pull request Jul 25, 2020
@karlhorky @Timer
Link with-polyfills example to updated polyfill docs (#13943)
c983667 
* Link to updated polyfill docs

Ref: #13766

* Update examples/with-polyfills/README.md

Co-authored-by: Joe Haddad <timer150@gmail.com>
@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.
Reviewers

@chibicode chibicode chibicode approved these changes

@ijjk ijjk ijjk approved these changes

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
9.4.5
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@Timer @ijjk @karlhorky @chibicode