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

Making font optimization as default #19758

Merged
merged 18 commits into from
Dec 4, 2020
Merged

Making font optimization as default #19758

merged 18 commits into from
Dec 4, 2020

Conversation

prateekbh
Copy link
Contributor

@prateekbh prateekbh commented Dec 2, 2020

@vercel vercel bot temporarily deployed to Preview December 2, 2020 19:27 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 9.3s 9s -290ms
nodeModulesSize 82.3 MB 82.3 MB
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 1.86 1.856 0
/ avg req/sec 1343.93 1346.89 +2.96
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.21 1.157 -0.05
/error-in-render avg req/sec 2066.69 2161.67 +94.98
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.01 kB
Client Build Manifests
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Serverless Mode
General
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 10.6s 10.8s ⚠️ +134ms
nodeModulesSize 82.3 MB 82.3 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.01 kB
Client Build Manifests
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Serverless bundles
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 997 kB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 998 kB
link.js 1.05 MB 1.05 MB
routerDirect.js 1.04 MB 1.04 MB
withRouter.js 1.04 MB 1.04 MB
Overall change 5.14 MB 5.14 MB
Commit: 76ca66c

@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Failing test suites

Commit: 76ca66c

test/integration/font-optimization/test/index.test.js

  • Font optimization for emulated serverless apps > should inline the google fonts for static pages
  • Font optimization for emulated serverless apps > should inline the google fonts for static pages with Next/Head
  • Font optimization for emulated serverless apps > should inline the google fonts for SSR pages
Expand output

● Font optimization for emulated serverless apps › should inline the google fonts for static pages

expect(received).toMatch(expected)

Expected pattern: /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
Received string:  "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/\",\"query\":{},\"buildId\":\"DoATqNB2dBD3nxSSxwCvL\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" async=\"\"></script><script src=\"/_next/static/DoATqNB2dBD3nxSSxwCvL/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/DoATqNB2dBD3nxSSxwCvL/_ssgManifest.js\" async=\"\"></script></body></html>"

  48 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
  49 |     )
> 50 |     expect(html).toMatch(
     |                  ^
  51 |       /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
  52 |     )
  53 |   })

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:50:18)

● Font optimization for emulated serverless apps › should inline the google fonts for static pages with Next/Head

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Modak\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><link href=\"https://fonts.googleapis.com/css2?family=Modak\" rel=\"stylesheet\"/><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-head\",\"query\":{},\"buildId\":\"DoATqNB2dBD3nxSSxwCvL\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" async=\"\"></script><script src=\"/_next/static/DoATqNB2dBD3nxSSxwCvL/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/DoATqNB2dBD3nxSSxwCvL/_ssgManifest.js\" async=\"\"></script></body></html>"

  56 |     const html = await renderViaHTTP(appPort, '/static-head')
  57 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 58 |     expect(html).toContain(
     |                  ^
  59 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
  60 |     )
  61 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:58:18)

● Font optimization for emulated serverless apps › should inline the google fonts for SSR pages

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" as=\"script\"/></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->334.23820269298864</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":334.23820269298864}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"DoATqNB2dBD3nxSSxwCvL\",\"runtimeConfig\":{},\"nextExport\":false,\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" async=\"\"></script><script src=\"/_next/static/DoATqNB2dBD3nxSSxwCvL/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/DoATqNB2dBD3nxSSxwCvL/_ssgManifest.js\" async=\"\"></script></body></html>"

  67 |     const html = await renderViaHTTP(appPort, '/stars')
  68 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 69 |     expect(html).toContain(
     |                  ^
  70 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  71 |     )
  72 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:69:18)

@ijjk ijjk added the type: next label Dec 2, 2020
@vercel vercel bot temporarily deployed to Preview December 2, 2020 19:49 Inactive
@vercel vercel bot temporarily deployed to Preview December 2, 2020 19:50 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 10.6s 10.4s -152ms
nodeModulesSize 82.3 MB 82.3 MB -118 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 2.065 2.095 ⚠️ +0.03
/ avg req/sec 1210.74 1193.38 ⚠️ -17.36
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.309 1.273 -0.04
/error-in-render avg req/sec 1910.02 1963.19 +53.17
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.01 kB
Client Build Manifests
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 11.9s 12.5s ⚠️ +588ms
nodeModulesSize 82.3 MB 82.3 MB -118 B
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.01 kB
Client Build Manifests
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 998 kB ⚠️ +130 B
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 998 kB ⚠️ +130 B
link.js 1.05 MB 1.05 MB ⚠️ +130 B
routerDirect.js 1.04 MB 1.04 MB ⚠️ +130 B
withRouter.js 1.04 MB 1.04 MB ⚠️ +130 B
Overall change 5.14 MB 5.14 MB ⚠️ +650 B
Commit: 451ffc6

@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 11.4s 11s -381ms
nodeModulesSize 82.3 MB 82.3 MB -118 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 2.268 2.294 ⚠️ +0.03
/ avg req/sec 1102.09 1089.81 ⚠️ -12.28
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.663 1.635 -0.03
/error-in-render avg req/sec 1503.4 1529.42 +26.02
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.01 kB
Client Build Manifests
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 13.3s 13.3s -14ms
nodeModulesSize 82.3 MB 82.3 MB -118 B
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.44 kB
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.01 kB
Client Build Manifests
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 998 kB ⚠️ +130 B
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 998 kB ⚠️ +130 B
link.js 1.05 MB 1.05 MB ⚠️ +130 B
routerDirect.js 1.04 MB 1.04 MB ⚠️ +130 B
withRouter.js 1.04 MB 1.04 MB ⚠️ +130 B
Overall change 5.14 MB 5.14 MB ⚠️ +650 B
Commit: 766fa30

@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Failing test suites

Commit: 451ffc6

test/integration/font-optimization/test/index.test.js

  • Font optimization for emulated serverless apps > should inline the google fonts for static pages
  • Font optimization for emulated serverless apps > should inline the google fonts for static pages with Next/Head
  • Font optimization for emulated serverless apps > should inline the google fonts for SSR pages
Expand output

● Font optimization for emulated serverless apps › should inline the google fonts for static pages

expect(received).toMatch(expected)

Expected pattern: /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
Received string:  "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/\",\"query\":{},\"buildId\":\"cNcfGv-z3mit3u1rLitiG\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" async=\"\"></script><script src=\"/_next/static/cNcfGv-z3mit3u1rLitiG/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/cNcfGv-z3mit3u1rLitiG/_ssgManifest.js\" async=\"\"></script></body></html>"

  48 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
  49 |     )
> 50 |     expect(html).toMatch(
     |                  ^
  51 |       /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
  52 |     )
  53 |   })

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:50:18)

● Font optimization for emulated serverless apps › should inline the google fonts for static pages with Next/Head

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Modak\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><link href=\"https://fonts.googleapis.com/css2?family=Modak\" rel=\"stylesheet\"/><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-head\",\"query\":{},\"buildId\":\"cNcfGv-z3mit3u1rLitiG\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" async=\"\"></script><script src=\"/_next/static/cNcfGv-z3mit3u1rLitiG/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/cNcfGv-z3mit3u1rLitiG/_ssgManifest.js\" async=\"\"></script></body></html>"

  56 |     const html = await renderViaHTTP(appPort, '/static-head')
  57 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 58 |     expect(html).toContain(
     |                  ^
  59 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
  60 |     )
  61 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:58:18)

● Font optimization for emulated serverless apps › should inline the google fonts for SSR pages

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" as=\"script\"/></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->499.44891667738614</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":499.44891667738614}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"cNcfGv-z3mit3u1rLitiG\",\"runtimeConfig\":{},\"nextExport\":false,\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" async=\"\"></script><script src=\"/_next/static/cNcfGv-z3mit3u1rLitiG/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/cNcfGv-z3mit3u1rLitiG/_ssgManifest.js\" async=\"\"></script></body></html>"

  67 |     const html = await renderViaHTTP(appPort, '/stars')
  68 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 69 |     expect(html).toContain(
     |                  ^
  70 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  71 |     )
  72 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:69:18)

@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Failing test suites

Commit: 766fa30

test/integration/font-optimization/test/index.test.js

  • Font optimization for emulated serverless apps > should inline the google fonts for static pages
  • Font optimization for emulated serverless apps > should inline the google fonts for static pages with Next/Head
  • Font optimization for emulated serverless apps > should inline the google fonts for SSR pages
Expand output

● Font optimization for emulated serverless apps › should inline the google fonts for static pages

expect(received).toMatch(expected)

Expected pattern: /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
Received string:  "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/\",\"query\":{},\"buildId\":\"aJz_TpuDpMPjUmGvA_ctQ\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" async=\"\"></script><script src=\"/_next/static/aJz_TpuDpMPjUmGvA_ctQ/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/aJz_TpuDpMPjUmGvA_ctQ/_ssgManifest.js\" async=\"\"></script></body></html>"

  48 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
  49 |     )
> 50 |     expect(html).toMatch(
     |                  ^
  51 |       /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
  52 |     )
  53 |   })

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:50:18)

● Font optimization for emulated serverless apps › should inline the google fonts for static pages with Next/Head

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Modak\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><link href=\"https://fonts.googleapis.com/css2?family=Modak\" rel=\"stylesheet\"/><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-head\",\"query\":{},\"buildId\":\"aJz_TpuDpMPjUmGvA_ctQ\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" async=\"\"></script><script src=\"/_next/static/aJz_TpuDpMPjUmGvA_ctQ/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/aJz_TpuDpMPjUmGvA_ctQ/_ssgManifest.js\" async=\"\"></script></body></html>"

  56 |     const html = await renderViaHTTP(appPort, '/static-head')
  57 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 58 |     expect(html).toContain(
     |                  ^
  59 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
  60 |     )
  61 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:58:18)

● Font optimization for emulated serverless apps › should inline the google fonts for SSR pages

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" as=\"script\"/></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->113.68630576214112</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":113.68630576214112}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"aJz_TpuDpMPjUmGvA_ctQ\",\"runtimeConfig\":{},\"nextExport\":false,\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" async=\"\"></script><script src=\"/_next/static/aJz_TpuDpMPjUmGvA_ctQ/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/aJz_TpuDpMPjUmGvA_ctQ/_ssgManifest.js\" async=\"\"></script></body></html>"

  67 |     const html = await renderViaHTTP(appPort, '/stars')
  68 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 69 |     expect(html).toContain(
     |                  ^
  70 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  71 |     )
  72 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:69:18)

@vercel vercel bot temporarily deployed to Preview December 2, 2020 20:19 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Failing test suites

Commit: e28141c

test/integration/build-output/test/index.test.js

  • Build Output > Basic Application Output > should not deviate from snapshot
Expand output

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 0
Received:    0.10000000000000009

   99 |       expect(indexFirstLoad.endsWith('kB')).toBe(true)
  100 | 
> 101 |       expect(parseFloat(err404Size) - 3.6).toBeLessThanOrEqual(0)
      |                                            ^
  102 |       expect(err404Size.endsWith('kB')).toBe(true)
  103 | 
  104 |       expect(parseFloat(err404FirstLoad) - 65.2).toBeLessThanOrEqual(0)

  at Object.<anonymous> (integration/build-output/test/index.test.js:101:44)

test/integration/script-loader/test/index.test.js

  • Script Loader > priority eager
Expand output

● Script Loader › priority eager

expect(received).toBeGreaterThan(expected)

Expected: > 0
Received:   0

  117 |         `link[rel=stylesheet][href="https://fonts.googleapis.com/css?family=Voces"] ~ link[rel=preload][href="${src}"]`
  118 |       ).length
> 119 |     ).toBeGreaterThan(0)
      |       ^
  120 | 
  121 |     // Script is inserted before NextScripts
  122 |     expect(

  at Object.<anonymous> (integration/script-loader/test/index.test.js:119:7)

@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 11s 11.4s ⚠️ +373ms
nodeModulesSize 82.4 MB 82.4 MB -249 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 2.334 2.468 ⚠️ +0.13
/ avg req/sec 1071.13 1012.78 ⚠️ -58.35
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.841 1.666 -0.18
/error-in-render avg req/sec 1358.24 1500.43 +142.19
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 323 B ⚠️ +2 B
Overall change 321 B 323 B ⚠️ +2 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-02dcb7995a984e881795.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 13.3s 13s -276ms
nodeModulesSize 82.4 MB 82.4 MB -249 B
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-fbd76..16d8.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 323 B ⚠️ +2 B
Overall change 321 B 323 B ⚠️ +2 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 999 kB ⚠️ +1.13 kB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +1.13 kB
link.js 1.05 MB 1.05 MB ⚠️ +1.13 kB
routerDirect.js 1.04 MB 1.05 MB ⚠️ +1.13 kB
withRouter.js 1.04 MB 1.05 MB ⚠️ +1.13 kB
Overall change 5.14 MB 5.15 MB ⚠️ +5.67 kB
Commit: e28141c

@vercel vercel bot temporarily deployed to Preview December 2, 2020 20:43 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 10.6s 10.1s -484ms
nodeModulesSize 82.4 MB 82.4 MB -249 B
Page Load Tests Overall increase ✓
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 2.231 2.146 -0.08
/ avg req/sec 1120.74 1165.05 +44.31
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.553 1.486 -0.07
/error-in-render avg req/sec 1609.83 1682.71 +72.88
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 323 B ⚠️ +2 B
Overall change 321 B 323 B ⚠️ +2 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-02dcb7995a984e881795.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 12s 12s -45ms
nodeModulesSize 82.4 MB 82.4 MB -249 B
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-fbd76..16d8.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 323 B ⚠️ +2 B
Overall change 321 B 323 B ⚠️ +2 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 999 kB ⚠️ +1.13 kB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +1.13 kB
link.js 1.05 MB 1.05 MB ⚠️ +1.13 kB
routerDirect.js 1.04 MB 1.05 MB ⚠️ +1.13 kB
withRouter.js 1.04 MB 1.05 MB ⚠️ +1.13 kB
Overall change 5.14 MB 5.15 MB ⚠️ +5.67 kB
Commit: ca46378

@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Failing test suites

Commit: ca46378

test/integration/font-optimization/test/index.test.js

  • Font optimization for SSR apps > should inline the google fonts for static pages
  • Font optimization for SSR apps > should inline the google fonts for static pages with Next/Head
  • Font optimization for SSR apps > should inline the google fonts for SSR pages
  • Font optimization for emulated serverless apps > should inline the google fonts for static pages
  • Font optimization for emulated serverless apps > should inline the google fonts for static pages with Next/Head
  • Font optimization for emulated serverless apps > should inline the google fonts for SSR pages
Expand output

● Font optimization for SSR apps › should inline the google fonts for static pages

expect(received).toMatch(expected)

Expected pattern: /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
Received string:  "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>404: This page could not be found</title><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_error-941c848f968d4eb29273.js\" as=\"script\"/></head><body><div id=\"__next\"><div style=\"color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center\"><div><style>body { margin: 0 }</style><h1 style=\"display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top\">404</h1><div style=\"display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle\"><h2 style=\"font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0\">This page could not be found<!-- -->.</h2></div></div></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":404}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"EDipupB090mI2L1aTm4YL\",\"nextExport\":true,\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_error-941c848f968d4eb29273.js\" async=\"\"></script><script src=\"/_next/static/EDipupB090mI2L1aTm4YL/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/EDipupB090mI2L1aTm4YL/_ssgManifest.js\" async=\"\"></script></body></html>"

  48 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
  49 |     )
> 50 |     expect(html).toMatch(
     |                  ^
  51 |       /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
  52 |     )
  53 |   })

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:50:18)

● Font optimization for SSR apps › should inline the google fonts for static pages with Next/Head

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Modak\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><link href=\"https://fonts.googleapis.com/css2?family=Modak\" rel=\"stylesheet\"/><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-head\",\"query\":{},\"buildId\":\"EDipupB090mI2L1aTm4YL\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" async=\"\"></script><script src=\"/_next/static/EDipupB090mI2L1aTm4YL/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/EDipupB090mI2L1aTm4YL/_ssgManifest.js\" async=\"\"></script></body></html>"

  56 |     const html = await renderViaHTTP(appPort, '/static-head')
  57 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 58 |     expect(html).toContain(
     |                  ^
  59 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
  60 |     )
  61 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:58:18)

● Font optimization for SSR apps › should inline the google fonts for SSR pages

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" as=\"script\"/></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->613.5662343621605</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":613.5662343621605}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"EDipupB090mI2L1aTm4YL\",\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" async=\"\"></script><script src=\"/_next/static/EDipupB090mI2L1aTm4YL/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/EDipupB090mI2L1aTm4YL/_ssgManifest.js\" async=\"\"></script></body></html>"

  67 |     const html = await renderViaHTTP(appPort, '/stars')
  68 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 69 |     expect(html).toContain(
     |                  ^
  70 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  71 |     )
  72 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:69:18)

● Font optimization for emulated serverless apps › should inline the google fonts for static pages

expect(received).toMatch(expected)

Expected pattern: /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
Received string:  "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/\",\"query\":{},\"buildId\":\"RYvRYD3kanZ1d8XnfGV6U\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/index-e01a7adf22e4e7823268.js\" async=\"\"></script><script src=\"/_next/static/RYvRYD3kanZ1d8XnfGV6U/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/RYvRYD3kanZ1d8XnfGV6U/_ssgManifest.js\" async=\"\"></script></body></html>"

  48 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
  49 |     )
> 50 |     expect(html).toMatch(
     |                  ^
  51 |       /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
  52 |     )
  53 |   })

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:50:18)

● Font optimization for emulated serverless apps › should inline the google fonts for static pages with Next/Head

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Modak\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><link href=\"https://fonts.googleapis.com/css2?family=Modak\" rel=\"stylesheet\"/><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" as=\"script\"/></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-head\",\"query\":{},\"buildId\":\"RYvRYD3kanZ1d8XnfGV6U\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" async=\"\"></script><script src=\"/_next/static/RYvRYD3kanZ1d8XnfGV6U/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/RYvRYD3kanZ1d8XnfGV6U/_ssgManifest.js\" async=\"\"></script></body></html>"

  56 |     const html = await renderViaHTTP(appPort, '/static-head')
  57 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 58 |     expect(html).toContain(
     |                  ^
  59 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
  60 |     )
  61 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:58:18)

● Font optimization for emulated serverless apps › should inline the google fonts for SSR pages

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" as=\"script\"/></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->906.8782559312798</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":906.8782559312798}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"RYvRYD3kanZ1d8XnfGV6U\",\"runtimeConfig\":{},\"nextExport\":false,\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" async=\"\"></script><script src=\"/_next/static/RYvRYD3kanZ1d8XnfGV6U/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/RYvRYD3kanZ1d8XnfGV6U/_ssgManifest.js\" async=\"\"></script></body></html>"

  67 |     const html = await renderViaHTTP(appPort, '/stars')
  68 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 69 |     expect(html).toContain(
     |                  ^
  70 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  71 |     )
  72 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:69:18)

test/integration/script-loader/test/index.test.js

  • Script Loader > priority eager
Expand output

● Script Loader › priority eager

expect(received).toBeGreaterThan(expected)

Expected: > 0
Received:   0

  117 |         `link[rel=stylesheet][href="https://fonts.googleapis.com/css?family=Voces"] ~ link[rel=preload][href="${src}"]`
  118 |       ).length
> 119 |     ).toBeGreaterThan(0)
      |       ^
  120 | 
  121 |     // Script is inserted before NextScripts
  122 |     expect(

  at Object.<anonymous> (integration/script-loader/test/index.test.js:119:7)

@vercel vercel bot temporarily deployed to Preview December 2, 2020 21:19 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 10.5s 10.9s ⚠️ +362ms
nodeModulesSize 82.4 MB 82.4 MB -1.07 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 2.31 2.789 ⚠️ +0.48
/ avg req/sec 1082.4 896.47 ⚠️ -185.93
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.605 1.569 -0.04
/error-in-render avg req/sec 1557.48 1592.92 +35.44
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 323 B ⚠️ +2 B
Overall change 321 B 323 B ⚠️ +2 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-02dcb7995a984e881795.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 12.7s 12.8s ⚠️ +67ms
nodeModulesSize 82.4 MB 82.4 MB -1.07 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-fbd76..16d8.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 323 B ⚠️ +2 B
Overall change 321 B 323 B ⚠️ +2 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 998 kB ⚠️ +972 B
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +972 B
link.js 1.05 MB 1.05 MB ⚠️ +972 B
routerDirect.js 1.04 MB 1.05 MB ⚠️ +972 B
withRouter.js 1.04 MB 1.05 MB ⚠️ +972 B
Overall change 5.14 MB 5.15 MB ⚠️ +4.86 kB
Commit: 372435b

@ijjk
Copy link
Member

ijjk commented Dec 2, 2020

Failing test suites

Commit: 372435b

test/integration/font-optimization/test/index.test.js

  • Font optimization for SSR apps > should inline the google fonts for static pages with Next/Head
  • Font optimization for SSR apps > should inline the google fonts for SSR pages
  • Font optimization for emulated serverless apps > should inline the google fonts for static pages with Next/Head
  • Font optimization for emulated serverless apps > should inline the google fonts for SSR pages
Expand output

● Font optimization for SSR apps › should inline the google fonts for static pages with Next/Head

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Modak\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><link href=\"https://fonts.googleapis.com/css2?family=Modak\" rel=\"stylesheet\"/><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" as=\"script\"/><style data-href=\"https://fonts.googleapis.com/css?family=Voces\"></style></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-head\",\"query\":{},\"buildId\":\"03oNIoK30r74QUxMkB1GP\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" async=\"\"></script><script src=\"/_next/static/03oNIoK30r74QUxMkB1GP/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/03oNIoK30r74QUxMkB1GP/_ssgManifest.js\" async=\"\"></script></body></html>"

  56 |     const html = await renderViaHTTP(appPort, '/static-head')
  57 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 58 |     expect(html).toContain(
     |                  ^
  59 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
  60 |     )
  61 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:58:18)

● Font optimization for SSR apps › should inline the google fonts for SSR pages

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" as=\"script\"/><style data-href=\"https://fonts.googleapis.com/css?family=Voces\"></style></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->565.9113026440325</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":565.9113026440325}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"03oNIoK30r74QUxMkB1GP\",\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" async=\"\"></script><script src=\"/_next/static/03oNIoK30r74QUxMkB1GP/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/03oNIoK30r74QUxMkB1GP/_ssgManifest.js\" async=\"\"></script></body></html>"

  67 |     const html = await renderViaHTTP(appPort, '/stars')
  68 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 69 |     expect(html).toContain(
     |                  ^
  70 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  71 |     )
  72 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:69:18)

● Font optimization for emulated serverless apps › should inline the google fonts for static pages with Next/Head

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Modak\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><link href=\"https://fonts.googleapis.com/css2?family=Modak\" rel=\"stylesheet\"/><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" as=\"script\"/><style data-href=\"https://fonts.googleapis.com/css?family=Voces\">@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id=\"__next\"><div>Hi!</div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-head\",\"query\":{},\"buildId\":\"dpG1w8Y-oeWTkcibi57vZ\",\"runtimeConfig\":{},\"nextExport\":true,\"autoExport\":true,\"isFallback\":false}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/static-head-2c53df5b215a32e786be.js\" async=\"\"></script><script src=\"/_next/static/dpG1w8Y-oeWTkcibi57vZ/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/dpG1w8Y-oeWTkcibi57vZ/_ssgManifest.js\" async=\"\"></script></body></html>"

  56 |     const html = await renderViaHTTP(appPort, '/static-head')
  57 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 58 |     expect(html).toContain(
     |                  ^
  59 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
  60 |     )
  61 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:58:18)

● Font optimization for emulated serverless apps › should inline the google fonts for SSR pages

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" as=\"script\"/><style data-href=\"https://fonts.googleapis.com/css?family=Voces\">@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->87.33999074556786</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":87.33999074556786}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"dpG1w8Y-oeWTkcibi57vZ\",\"runtimeConfig\":{},\"nextExport\":false,\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-bbca6d4025a05cf3a322.js\" async=\"\"></script><script src=\"/_next/static/dpG1w8Y-oeWTkcibi57vZ/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/dpG1w8Y-oeWTkcibi57vZ/_ssgManifest.js\" async=\"\"></script></body></html>"

  67 |     const html = await renderViaHTTP(appPort, '/stars')
  68 |     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 69 |     expect(html).toContain(
     |                  ^
  70 |       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  71 |     )
  72 |     expect(html).toMatch(

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:69:18)

test/integration/script-loader/test/index.test.js

  • Script Loader > priority eager
Expand output

● Script Loader › priority eager

expect(received).toBeGreaterThan(expected)

Expected: > 0
Received:   0

  117 |         `link[rel=stylesheet][href="https://fonts.googleapis.com/css?family=Voces"] ~ link[rel=preload][href="${src}"]`
  118 |       ).length
> 119 |     ).toBeGreaterThan(0)
      |       ^
  120 | 
  121 |     // Script is inserted before NextScripts
  122 |     expect(

  at Object.<anonymous> (integration/script-loader/test/index.test.js:119:7)

@vercel vercel bot temporarily deployed to Preview December 3, 2020 21:53 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 3, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 10.6s 10.8s ⚠️ +246ms
nodeModulesSize 82.4 MB 82.4 MB -4.54 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 2.171 2.706 ⚠️ +0.54
/ avg req/sec 1151.79 923.9 ⚠️ -227.89
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.571 1.577 ⚠️ +0.01
/error-in-render avg req/sec 1591.59 1584.94 ⚠️ -6.65
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-fbaccf4d6b3c31a2915e.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 12.5s 12.7s ⚠️ +247ms
nodeModulesSize 82.4 MB 82.4 MB -4.54 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-01375..90b6.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 998 kB ⚠️ +907 B
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +907 B
link.js 1.05 MB 1.05 MB ⚠️ +907 B
routerDirect.js 1.04 MB 1.05 MB ⚠️ +907 B
withRouter.js 1.04 MB 1.05 MB ⚠️ +907 B
Overall change 5.14 MB 5.15 MB ⚠️ +4.54 kB
Commit: 8b1048d

@ijjk
Copy link
Member

ijjk commented Dec 3, 2020

Failing test suites

Commit: 8b1048d

test/integration/font-optimization/test/index.test.js

  • Font optimization for SSR apps > Font optimization for unreachable font definitions. > should fallback to normal stylesheet if the contents of the fonts are unreachable
  • Font optimization for emulated serverless apps > Font optimization for unreachable font definitions. > should fallback to normal stylesheet if the contents of the fonts are unreachable
  • Font optimization for serverless apps > Font optimization for unreachable font definitions. > should fallback to normal stylesheet if the contents of the fonts are unreachable
Expand output

● Font optimization for SSR apps › Font optimization for unreachable font definitions. › should fallback to normal stylesheet if the contents of the fonts are unreachable

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  121 |     it('should fallback to normal stylesheet if the contents of the fonts are unreachable', async () => {
  122 |       const html = await renderViaHTTP(appPort, '/stars')
> 123 |       expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
      |                                                               ^
  124 |       expect(html).toContain(
  125 |         '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  126 |       )

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:123:63)

● Font optimization for serverless apps › Font optimization for unreachable font definitions. › should fallback to normal stylesheet if the contents of the fonts are unreachable

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-60a9b9bdded0116e85b6.js\" as=\"script\"/><style data-href=\"https://fonts.googleapis.com/css?family=Voces\"></style><style data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"></style></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->281.1344385578609</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":281.1344385578609}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"BcjyZawq2ouMVuGGmCUYW\",\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-60a9b9bdded0116e85b6.js\" async=\"\"></script><script src=\"/_next/static/BcjyZawq2ouMVuGGmCUYW/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/BcjyZawq2ouMVuGGmCUYW/_ssgManifest.js\" async=\"\"></script></body></html>"

  122 |       const html = await renderViaHTTP(appPort, '/stars')
  123 |       expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 124 |       expect(html).toContain(
      |                    ^
  125 |         '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  126 |       )
  127 |     })

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:124:20)

● Font optimization for emulated serverless apps › Font optimization for unreachable font definitions. › should fallback to normal stylesheet if the contents of the fonts are unreachable

expect(received).toContain(expected) // indexOf

Expected substring: "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/>"
Received string:    "<!DOCTYPE html><html><head><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css?family=Voces\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Create Next App</title><link rel=\"icon\" href=\"/favicon.ico\"/><link rel=\"stylesheet\" data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"/><meta name=\"next-head-count\" content=\"5\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/stars-60a9b9bdded0116e85b6.js\" as=\"script\"/><style data-href=\"https://fonts.googleapis.com/css?family=Voces\"></style><style data-href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@700\"></style></head><body><div id=\"__next\"><div class=\"container\"><main><div>Next stars: <!-- -->334.06611974213416</div></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"stars\":334.06611974213416}},\"page\":\"/stars\",\"query\":{},\"buildId\":\"T-Ek56qerqV_KDAxke6ss\",\"isFallback\":false,\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills-e60bf636a1339bc95b80.js\"></script><script src=\"/_next/static/chunks/main-f63eac8b0e4a35424050.js\" async=\"\"></script><script src=\"/_next/static/chunks/webpack-e067438c4cf4ef2ef178.js\" async=\"\"></script><script src=\"/_next/static/chunks/framework.d462f293190b01a8404a.js\" async=\"\"></script><script src=\"/_next/static/chunks/279ac2b5366948f8a3fe6b33a5b1c5337242d383.729461eb0f58ff044014.js\" async=\"\"></script><script src=\"/_next/static/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.ee3993d748e5b7a685bc.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/_app-4167a7455d9570b02356.js\" async=\"\"></script><script src=\"/_next/static/chunks/pages/stars-60a9b9bdded0116e85b6.js\" async=\"\"></script><script src=\"/_next/static/T-Ek56qerqV_KDAxke6ss/_buildManifest.js\" async=\"\"></script><script src=\"/_next/static/T-Ek56qerqV_KDAxke6ss/_ssgManifest.js\" async=\"\"></script></body></html>"

  122 |       const html = await renderViaHTTP(appPort, '/stars')
  123 |       expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
> 124 |       expect(html).toContain(
      |                    ^
  125 |         '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  126 |       )
  127 |     })

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:124:20)

@vercel vercel bot temporarily deployed to Preview December 3, 2020 23:03 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 3, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 9.8s 9.9s ⚠️ +125ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 2.026 2.37 ⚠️ +0.34
/ avg req/sec 1234.05 1054.93 ⚠️ -179.12
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.193 1.226 ⚠️ +0.03
/error-in-render avg req/sec 2095.6 2039.92 ⚠️ -55.68
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-fbaccf4d6b3c31a2915e.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 11.9s 11.9s -1ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-01375..90b6.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 999 kB ⚠️ +1.17 kB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +1.17 kB
link.js 1.05 MB 1.05 MB ⚠️ +1.17 kB
routerDirect.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
withRouter.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
Overall change 5.14 MB 5.15 MB ⚠️ +5.85 kB
Commit: b20c1d0

@ijjk
Copy link
Member

ijjk commented Dec 3, 2020

Failing test suites

Commit: b20c1d0

test/integration/font-optimization/test/index.test.js

  • Font optimization for SSR apps > Font optimization for unreachable font definitions. > should fallback to normal stylesheet if the contents of the fonts are unreachable
Expand output

● Font optimization for SSR apps › Font optimization for unreachable font definitions. › should fallback to normal stylesheet if the contents of the fonts are unreachable

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  121 |     it('should fallback to normal stylesheet if the contents of the fonts are unreachable', async () => {
  122 |       const html = await renderViaHTTP(appPort, '/stars')
> 123 |       expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
      |                                                               ^
  124 |       expect(html).toContain(
  125 |         '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  126 |       )

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:123:63)

@vercel vercel bot temporarily deployed to Preview December 3, 2020 23:44 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 3, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 8.9s 8.8s -93ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 1.791 2.144 ⚠️ +0.35
/ avg req/sec 1396.26 1166 ⚠️ -230.26
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.134 1.145 ⚠️ +0.01
/error-in-render avg req/sec 2203.93 2183.26 ⚠️ -20.67
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-fbaccf4d6b3c31a2915e.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 10.5s 10.4s -58ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-01375..90b6.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 999 kB ⚠️ +1.17 kB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +1.17 kB
link.js 1.05 MB 1.05 MB ⚠️ +1.17 kB
routerDirect.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
withRouter.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
Overall change 5.14 MB 5.15 MB ⚠️ +5.85 kB
Commit: b1e309a

@ijjk
Copy link
Member

ijjk commented Dec 3, 2020

Failing test suites

Commit: b1e309a

test/integration/font-optimization/test/index.test.js

  • Font optimization for SSR apps > Font optimization for unreachable font definitions. > should fallback to normal stylesheet if the contents of the fonts are unreachable
Expand output

● Font optimization for SSR apps › Font optimization for unreachable font definitions. › should fallback to normal stylesheet if the contents of the fonts are unreachable

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  121 |     it('should fallback to normal stylesheet if the contents of the fonts are unreachable', async () => {
  122 |       const html = await renderViaHTTP(appPort, '/stars')
> 123 |       expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
      |                                                               ^
  124 |       expect(html).toContain(
  125 |         '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
  126 |       )

  at Object.<anonymous> (integration/font-optimization/test/index.test.js:123:63)

@vercel vercel bot temporarily deployed to Preview December 4, 2020 09:20 Inactive
@vercel vercel bot temporarily deployed to Preview December 4, 2020 09:22 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 9.6s 9.7s ⚠️ +87ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 1.915 2.36 ⚠️ +0.44
/ avg req/sec 1305.37 1059.32 ⚠️ -246.05
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.169 1.209 ⚠️ +0.04
/error-in-render avg req/sec 2138.77 2068.13 ⚠️ -70.64
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-fbaccf4d6b3c31a2915e.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 11.4s 11.3s -53ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-01375..90b6.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 999 kB ⚠️ +1.17 kB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +1.17 kB
link.js 1.05 MB 1.05 MB ⚠️ +1.17 kB
routerDirect.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
withRouter.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
Overall change 5.14 MB 5.15 MB ⚠️ +5.85 kB
Commit: dfb2e70

@ijjk
Copy link
Member

ijjk commented Dec 4, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 9.9s 9.7s -186ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
/ failed reqs 0 0
/ total time (seconds) 1.991 2.326 ⚠️ +0.34
/ avg req/sec 1255.86 1074.59 ⚠️ -181.27
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.293 1.282 -0.01
/error-in-render avg req/sec 1934.13 1950.81 +16.68
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB 3.69 kB ⚠️ +257 B
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Rendered Page Sizes
vercel/next.js canary azukaru/next.js font-redo Change
index.html gzip 614 B 614 B
link.html gzip 620 B 620 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Diffs

Diff for _buildManifest.js
@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: [],
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-283eed3c1520dcc26e8d.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-9b57cae5694a39479222.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-fbaccf4d6b3c31a2915e.js"
   ],
   "/hooks": [
     "static\u002Fchunks\u002Fpages\u002Fhooks-bdd2cad07648acf22380.js"
Diff for _error-9b57c..a39479222.js
@@ -535,8 +535,23 @@ Also adds support for deduplicated `key` properties
           .map(function(c, i) {
             var key = c.key || i;
 
-            if (false) {
-              var newProps;
+            if (true && !props.inAmpMode) {
+              if (
+                c.type === "link" &&
+                c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+                ["https://fonts.googleapis.com/css"].some(function(url) {
+                  return c.props["href"].startsWith(url);
+                })
+              ) {
+                var newProps = _objectSpread({}, c.props || {});
+
+                newProps["data-href"] = newProps["href"];
+                newProps["href"] = undefined;
+                return /*#__PURE__*/ _react["default"].cloneElement(
+                  c,
+                  newProps
+                );
+              }
             }
 
             return /*#__PURE__*/ _react["default"].cloneElement(c, {

Serverless Mode (Increase detected ⚠️)
General Overall decrease ✓
vercel/next.js canary azukaru/next.js font-redo Change
buildDuration 11.8s 11.8s ⚠️ +24ms
nodeModulesSize 82.4 MB 82.4 MB -3.91 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary azukaru/next.js font-redo Change
677f882d2ed8..8b6e.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-3c9ff84..1d7c.js gzip 6.56 kB 6.56 kB
webpack-e067..f178.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary azukaru/next.js font-redo Change
polyfills-4b..e242.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_app-7231d4b..5856.js gzip 1.28 kB 1.28 kB
_error-fca3d..2eb1.js gzip 3.44 kB N/A N/A
hooks-d4591d..e7c2.js gzip 887 B 887 B
index-17468f..5d83.js gzip 227 B 227 B
link-db223d9..dbd7.js gzip 1.61 kB 1.61 kB
routerDirect..924c.js gzip 284 B 284 B
withRouter-7..c13d.js gzip 284 B 284 B
_error-01375..90b6.js gzip N/A 3.69 kB N/A
Overall change 8.01 kB 8.27 kB ⚠️ +257 B
Client Build Manifests Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_buildManifest.js gzip 321 B 322 B ⚠️ +1 B
Overall change 321 B 322 B ⚠️ +1 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary azukaru/next.js font-redo Change
_error.js 997 kB 999 kB ⚠️ +1.17 kB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 998 kB 999 kB ⚠️ +1.17 kB
link.js 1.05 MB 1.05 MB ⚠️ +1.17 kB
routerDirect.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
withRouter.js 1.04 MB 1.05 MB ⚠️ +1.17 kB
Overall change 5.14 MB 5.15 MB ⚠️ +5.85 kB
Commit: e15e94e

@prateekbh prateekbh changed the title [DO NOT REVIEW] Font optimizations Making font optimization as default Dec 4, 2020
@kodiakhq kodiakhq bot merged commit 57e156b into vercel:canary Dec 4, 2020
@ijjk ijjk mentioned this pull request Dec 5, 2020
@kripod
Copy link
Contributor

kripod commented Dec 6, 2020

Unfortunately, this optimization doesn't work when fonts are injected on the fly with next/head. I'm using the gist below for loading Google Fonts on demand:

https://gist.github.com/kripod/52c0f37ad6c4d5e84b4e3a7bc976f50b

Usage example:

<GoogleFontsSheet
  fonts={{
    "Source Sans Pro": [
      { wght: 400 },
      { wght: 400, ital: 1 },
      { wght: 700 },
      { wght: 700, ital: 1 },
    ],
    "Playfair Display": [{ wght: 700 }],
  }}
/>

While the initially loaded font works fine, when props change, fonts aren't loaded anymore. This could possibly be fixed by allowing the runtime injection of Google Fonts <link> elements.

kodiakhq bot pushed a commit that referenced this pull request Dec 8, 2020
@kripod
Copy link
Contributor

kripod commented Dec 12, 2020

I've just opened #20134 to track the issue described in my previous comment. Thank you in advance for looking into it before rolling out font optimizations in a stable release.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Font Optimization produces empty font definitions
4 participants