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

feature/vanilla-emotion - add an example of vanilla emotion #20228

Merged
merged 15 commits into from
Jan 22, 2021
Merged

feature/vanilla-emotion - add an example of vanilla emotion #20228

merged 15 commits into from
Jan 22, 2021

Conversation

MMT-LD
Copy link
Contributor

@MMT-LD MMT-LD commented Dec 16, 2020

This pull request addresses #20199 for the vanilla emotion example.

@ijjk ijjk added the examples Issue/PR related to examples label Dec 16, 2020
@vercel vercel bot temporarily deployed to Preview December 16, 2020 11:41 Inactive
@vercel vercel bot temporarily deployed to Preview December 16, 2020 11:43 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 16, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 8.5s 8.5s -7ms
nodeModulesSize 82.4 MB 82.4 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 2.014 2.007 -0.01
/ avg req/sec 1241.2 1245.38 +4.18
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.059 1.124 ⚠️ +0.07
/error-in-render avg req/sec 2361.13 2224.68 ⚠️ -136.45
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..0679.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-008bb91..b823.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59.1 kB 59.1 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-2cf0e..a0a0.js gzip 3.69 kB 3.69 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.31 kB 8.31 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 615 B 615 B
link.html gzip 621 B 621 B
withRouter.html gzip 609 B 609 B
Overall change 1.84 kB 1.84 kB

Serverless Mode
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 9.9s 9.9s ⚠️ +3ms
nodeModulesSize 82.4 MB 82.4 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..0679.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-008bb91..b823.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59.1 kB 59.1 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-2cf0e..a0a0.js gzip 3.69 kB 3.69 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.31 kB 8.31 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Serverless bundles
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_error.js 1 MB 1 MB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 1 MB 1 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.16 MB 5.16 MB
Commit: 7522b86

@leodr
Copy link
Contributor

leodr commented Dec 16, 2020

As far as I can see the CSS with this example is not minified since it is contained in string literals. Could we find a way to minify it?

@MMT-LD
Copy link
Contributor Author

MMT-LD commented Dec 16, 2020

@leodr The css you see in the code is extracted and minified once placed in the head of the document - when i view source its minified for me. Unless i'm not understanding what you're referring too?

image

@leodr
Copy link
Contributor

leodr commented Dec 16, 2020

Yes, you are right about the styles in the style tag, but the styles will also be contained in the client bundle.

If you run next build and check out the bundle for the index page (for me examples/with-emotion-vanilla/.next/static/chunks/pages/index-7bbaceef0f12af96f2f5.js) and prettify it you will see code like this:

function u() {
  var e = i([
    "\n  from, 20%, 53%, 80%, to {\n    transform: translate3d(0,0,0);\n  }\n\n  40%, 43% {\n    transform: translate3d(0, -30px, 0);\n  }\n\n  70% {\n    transform: translate3d(0, -15px, 0);\n  }\n\n  90% {\n    transform: translate3d(0,-4px,0);\n  }\n",
  ]);
  return (
    (u = function () {
      return e;
    }),
    e
  );
}
function s() {
  var e = i([
    "\n  font-size: 20px;\n  padding: 15px;\n  background: blue;\np  color: white;\n",
  ]);
  return (
    (s = function () {
      return e;
    }),
    e
  );
}

As you can see there is lots of whitespace in the strings that contain CSS. This increases the JS bundle size.

You should be able to minify the CSS in these strings by including @emotion/babel-plugin in a custom babel config.

@MMT-LD
Copy link
Contributor Author

MMT-LD commented Dec 16, 2020

@leodr So i added the babel plugin locally and it did not make any difference. bundle with and without were the same. Im not sure if the babel plugin looks or even knows how to look for css coming from a custom instance.

Not sure what else i can do here on this point.

@leodr
Copy link
Contributor

leodr commented Dec 16, 2020

I've tried it myself and the babel plugin does not work because you create a custom instance of emotion and import it in styles.js instead of just importing from the @emotion/css package.

When you change the import in styles.js to

import { css, cx, injectGlobal, keyframes } from '@emotion/css'

the babel plugin works and correctly minifies the styles.

Is there any specific reason you have to create your own instance of emotion?

@MMT-LD
Copy link
Contributor Author

MMT-LD commented Dec 16, 2020

Nice! - so i was thinking about this and you are correct but in my case i use the createEmotion way so only recently tested what you're proposing and had already thought about this approach. Maybe I should create another page with the custom approach (id like to show both ways) so that users can assume either. Both are kind of documented in emotion docs.

@leodr
Copy link
Contributor

leodr commented Dec 16, 2020

According to the documentation creating your own instance should be a niche case and it actually breaks the babel plugin, so I would suggest sticking to the direct imports from @emotion/css.

If people need the custom instance they have such an advanced use case they can probably find out about it themselves.

@MMT-LD
Copy link
Contributor Author

MMT-LD commented Dec 16, 2020

I do agree - however, the approach with @emotion/css now breaks and we have two instances of styles in devtools and no SSR (if you turn JS off in devtools) now results in no styles and is only client side rendered. The reason why i did it the other way was because it works and we get limited FOUC. Also the other way gets around the double style tag.

I have a version working locally with just @emotion/css and @emotion/react packages and CacheProvider, however we still get the double style tag - as seen below.

image

the version in this pull request looks like:

image

@vercel vercel bot temporarily deployed to Preview December 16, 2020 22:33 Inactive
@vercel vercel bot temporarily deployed to Preview December 16, 2020 22:34 Inactive
@MMT-LD
Copy link
Contributor Author

MMT-LD commented Dec 16, 2020

@leodr Thanks for your input here. Much appreciated. I managed to get it working 😉 - New PR above.

@ijjk
Copy link
Member

ijjk commented Dec 16, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 8.8s 8.9s ⚠️ +29ms
nodeModulesSize 82.4 MB 82.4 MB
Page Load Tests Overall increase ✓
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 2.088 2.075 -0.01
/ avg req/sec 1197.15 1205.01 +7.86
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.106 1.098 -0.01
/error-in-render avg req/sec 2259.51 2277.72 +18.21
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..0679.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-008bb91..b823.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59.1 kB 59.1 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-2cf0e..a0a0.js gzip 3.69 kB 3.69 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.31 kB 8.31 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 615 B 615 B
link.html gzip 621 B 621 B
withRouter.html gzip 609 B 609 B
Overall change 1.84 kB 1.84 kB

Serverless Mode
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 10.4s 10.4s ⚠️ +32ms
nodeModulesSize 82.4 MB 82.4 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..0679.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-008bb91..b823.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59.1 kB 59.1 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-2cf0e..a0a0.js gzip 3.69 kB 3.69 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.31 kB 8.31 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Serverless bundles
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_error.js 1 MB 1 MB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 1 MB 1 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.16 MB 5.16 MB
Commit: be262d9

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
@vercel vercel bot temporarily deployed to Preview December 20, 2020 19:21 Inactive
@vercel vercel bot temporarily deployed to Preview December 20, 2020 19:25 Inactive
@vercel vercel bot temporarily deployed to Preview December 20, 2020 19:31 Inactive
@ijjk
Copy link
Member

ijjk commented Dec 20, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 10.1s 9.8s -260ms
nodeModulesSize 82.4 MB 82.4 MB
Page Load Tests Overall increase ✓
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 2.388 2.369 -0.02
/ avg req/sec 1047.07 1055.29 +8.22
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.266 1.226 -0.04
/error-in-render avg req/sec 1975.09 2039.38 +64.29
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..5e70.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-1f21dcf..0011.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-2cf0e..a0a0.js gzip 3.69 kB 3.69 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.31 kB 8.31 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 612 B 612 B
link.html gzip 619 B 619 B
withRouter.html gzip 608 B 608 B
Overall change 1.84 kB 1.84 kB

Serverless Mode
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 12s 11.7s -283ms
nodeModulesSize 82.4 MB 82.4 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..5e70.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-1f21dcf..0011.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-2cf0e..a0a0.js gzip 3.69 kB 3.69 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.31 kB 8.31 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Serverless bundles
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_error.js 1 MB 1 MB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 1 MB 1 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.16 MB 5.16 MB
Commit: f13229d

@ijjk
Copy link
Member

ijjk commented Dec 20, 2020

Failing test suites

Commit: f13229d

test/integration/dist-dir/test/index.test.js

  • distDir > should handle null/undefined distDir
Expand output

● distDir › should handle null/undefined distDir

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

Expected: 0
Received: 106

  63 |     await fs.writeFile(nextConfig, origNextConfig)
  64 | 
> 65 |     expect(stderr.length).toBe(0)
     |                           ^
  66 |   })
  67 | })
  68 | 

  at Object.<anonymous> (integration/dist-dir/test/index.test.js:65:27)

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

ijjk commented Dec 21, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 9.9s 9.7s -142ms
nodeModulesSize 82.6 MB 82.6 MB
Page Load Tests Overall increase ✓
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 1.997 1.995 0
/ avg req/sec 1251.75 1253.41 +1.66
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.51 1.494 -0.02
/error-in-render avg req/sec 1655.35 1672.99 +17.64
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..5e70.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-72193d1..1356.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-85785..a9f3.js gzip 3.44 kB 3.44 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.05 kB 8.05 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 613 B 613 B
link.html gzip 618 B 618 B
withRouter.html gzip 607 B 607 B
Overall change 1.84 kB 1.84 kB

Serverless Mode
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 11.9s 11.5s -321ms
nodeModulesSize 82.6 MB 82.6 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..5e70.js gzip 12.8 kB 12.8 kB
framework.HASH.js gzip 39 kB 39 kB
main-72193d1..1356.js gzip 6.56 kB 6.56 kB
webpack-95c2..e870.js gzip 751 B 751 B
Overall change 59 kB 59 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-d3..23f6.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-0d19cb6..5497.js gzip 1.28 kB 1.28 kB
_error-85785..a9f3.js gzip 3.44 kB 3.44 kB
hooks-42456f..0c06.js gzip 887 B 887 B
index-8081ce..e44f.js gzip 227 B 227 B
link-0ab9f83..fa00.js gzip 1.61 kB 1.61 kB
routerDirect..c3d8.js gzip 303 B 303 B
withRouter-0..a68e.js gzip 302 B 302 B
Overall change 8.05 kB 8.05 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 323 B 323 B
Overall change 323 B 323 B
Serverless bundles
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_error.js 1 MB 1 MB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 1 MB 1 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.16 MB 5.16 MB
Commit: de3d6fe

@MMT-LD
Copy link
Contributor Author

MMT-LD commented Jan 5, 2021

@Timer @timneutkens Not sure what needs to happen to this PR now? If i need to do anything else? Otherwise i guess this can be merged if happy?

@ijjk
Copy link
Member

ijjk commented Jan 21, 2021

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 8.2s 8.4s ⚠️ +108ms
nodeModulesSize 73.3 MB 73.3 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 1.654 1.707 ⚠️ +0.05
/ avg req/sec 1511.05 1464.94 ⚠️ -46.11
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.063 1.116 ⚠️ +0.05
/error-in-render avg req/sec 2352.14 2240.78 ⚠️ -111.36
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..43e3.js gzip 13.1 kB 13.1 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.4 kB 59.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
hooks-c71ae4..70cd.js gzip 887 B 887 B
index-bbee2f..528b.js gzip 227 B 227 B
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB
routerDirect..bf84.js gzip 303 B 303 B
withRouter-a..5826.js gzip 302 B 302 B
Overall change 8.09 kB 8.09 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 616 B 616 B
link.html gzip 621 B 621 B
withRouter.html gzip 609 B 609 B
Overall change 1.85 kB 1.85 kB

Serverless Mode
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 9.9s 9.7s -260ms
nodeModulesSize 73.3 MB 73.3 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..43e3.js gzip 13.1 kB 13.1 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.4 kB 59.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
hooks-c71ae4..70cd.js gzip 887 B 887 B
index-bbee2f..528b.js gzip 227 B 227 B
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB
routerDirect..bf84.js gzip 303 B 303 B
withRouter-a..5826.js gzip 302 B 302 B
Overall change 8.09 kB 8.09 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Serverless bundles
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_error.js 1 MB 1 MB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 1 MB 1 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.19 MB 5.19 MB

Webpack 5 Mode (Decrease detected ✓)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 9.8s 9.9s ⚠️ +51ms
nodeModulesSize 73.3 MB 73.3 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 1.652 1.7 ⚠️ +0.05
/ avg req/sec 1512.97 1470.74 ⚠️ -42.23
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.025 1.044 ⚠️ +0.02
/error-in-render avg req/sec 2438.69 2394.04 ⚠️ -44.65
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
597-3bd7d6bd..868b.js gzip 13 kB 13 kB
framework.HASH.js gzip 39.3 kB 39.3 kB
main-HASH.js gzip 6.58 kB 6.58 kB
webpack-HASH.js gzip 954 B 954 B
Overall change 59.8 kB 59.8 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB
Overall change 31.1 kB 31.1 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-a5b2e84..33cf.js gzip 1.26 kB 1.26 kB
_error-6f1f9..5577.js gzip 3.38 kB 3.38 kB
hooks-725de8..0a15.js gzip 904 B 904 B
index-939503..6e1c.js gzip 232 B 232 B
link-e0cc871..fdbb.js gzip 1.63 kB 1.63 kB
routerDirect..9360.js gzip 308 B 308 B
withRouter-6..44ec.js gzip 304 B 304 B
Overall change 8.02 kB 8.02 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 299 B 299 B
Overall change 299 B 299 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 585 B 585 B
link.html gzip 592 B 592 B
withRouter.html gzip 579 B 579 B
Overall change 1.76 kB 1.76 kB

Diffs

Diff for index.html
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "p16niDj6YR-ZWtddECWd7",
+        "buildId": "WW9M9KixHd933SQXPr0y2",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/p16niDj6YR-ZWtddECWd7/_buildManifest.js"
+      src="/_next/static/WW9M9KixHd933SQXPr0y2/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/p16niDj6YR-ZWtddECWd7/_ssgManifest.js"
+      src="/_next/static/WW9M9KixHd933SQXPr0y2/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for link.html
@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "p16niDj6YR-ZWtddECWd7",
+        "buildId": "WW9M9KixHd933SQXPr0y2",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/p16niDj6YR-ZWtddECWd7/_buildManifest.js"
+      src="/_next/static/WW9M9KixHd933SQXPr0y2/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/p16niDj6YR-ZWtddECWd7/_ssgManifest.js"
+      src="/_next/static/WW9M9KixHd933SQXPr0y2/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for withRouter.html
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "p16niDj6YR-ZWtddECWd7",
+        "buildId": "WW9M9KixHd933SQXPr0y2",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/p16niDj6YR-ZWtddECWd7/_buildManifest.js"
+      src="/_next/static/WW9M9KixHd933SQXPr0y2/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/p16niDj6YR-ZWtddECWd7/_ssgManifest.js"
+      src="/_next/static/WW9M9KixHd933SQXPr0y2/_ssgManifest.js"
       async=""
     ></script>
   </body>
Commit: 683eba9

@timneutkens
Copy link
Member

Thanks, this looks good to merge now!

@ijjk
Copy link
Member

ijjk commented Jan 22, 2021

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 9.1s 9s -123ms
nodeModulesSize 73.3 MB 73.3 MB
Page Load Tests Overall increase ✓
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 1.78 1.746 -0.03
/ avg req/sec 1404.87 1431.57 +26.7
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.165 1.142 -0.02
/error-in-render avg req/sec 2146.22 2188.56 +42.34
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..bb74.js gzip 13.1 kB 13.1 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.4 kB 59.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
hooks-c71ae4..70cd.js gzip 887 B 887 B
index-bbee2f..528b.js gzip 227 B 227 B
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB
routerDirect..bf84.js gzip 303 B 303 B
withRouter-a..5826.js gzip 302 B 302 B
Overall change 8.09 kB 8.09 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 613 B 613 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 MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 10.8s 10.7s -137ms
nodeModulesSize 73.3 MB 73.3 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
677f882d2ed8..bb74.js gzip 13.1 kB 13.1 kB
framework.HASH.js gzip 39 kB 39 kB
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
Overall change 59.4 kB 59.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-HASH.js gzip 31.3 kB 31.3 kB
Overall change 31.3 kB 31.3 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-2a09aa2..4a98.js gzip 1.28 kB 1.28 kB
_error-8b758..aef6.js gzip 3.46 kB 3.46 kB
hooks-c71ae4..70cd.js gzip 887 B 887 B
index-bbee2f..528b.js gzip 227 B 227 B
link-7faf09b..eba4.js gzip 1.64 kB 1.64 kB
routerDirect..bf84.js gzip 303 B 303 B
withRouter-a..5826.js gzip 302 B 302 B
Overall change 8.09 kB 8.09 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 321 B 321 B
Overall change 321 B 321 B
Serverless bundles
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_error.js 1 MB 1 MB
404.html 2.67 kB 2.67 kB
hooks.html 1.92 kB 1.92 kB
index.js 1 MB 1 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.19 MB 5.19 MB

Webpack 5 Mode (Decrease detected ✓)
General
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
buildDuration 10.7s 10.9s ⚠️ +185ms
nodeModulesSize 73.3 MB 73.3 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
/ failed reqs 0 0
/ total time (seconds) 1.757 1.828 ⚠️ +0.07
/ avg req/sec 1422.58 1367.51 ⚠️ -55.07
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.121 1.154 ⚠️ +0.03
/error-in-render avg req/sec 2230.13 2165.98 ⚠️ -64.15
Client Bundles (main, webpack, commons)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
597-168f5a87..2380.js gzip 13 kB 13 kB
framework.HASH.js gzip 39.3 kB 39.3 kB
main-HASH.js gzip 6.58 kB 6.58 kB
webpack-HASH.js gzip 954 B 954 B
Overall change 59.8 kB 59.8 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB
Overall change 31.1 kB 31.1 kB
Client Pages
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_app-a5b2e84..33cf.js gzip 1.26 kB 1.26 kB
_error-6f1f9..5577.js gzip 3.38 kB 3.38 kB
hooks-725de8..0a15.js gzip 904 B 904 B
index-939503..6e1c.js gzip 232 B 232 B
link-e0cc871..fdbb.js gzip 1.63 kB 1.63 kB
routerDirect..9360.js gzip 308 B 308 B
withRouter-6..44ec.js gzip 304 B 304 B
Overall change 8.02 kB 8.02 kB
Client Build Manifests
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
_buildManifest.js gzip 299 B 299 B
Overall change 299 B 299 B
Rendered Page Sizes
vercel/next.js canary MMT-LD/next.js feature/vanilla-emotion Change
index.html gzip 588 B 588 B
link.html gzip 593 B 593 B
withRouter.html gzip 583 B 583 B
Overall change 1.76 kB 1.76 kB

Diffs

Diff for index.html
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "p4wuvB7tQUUn5sF5mlHqO",
+        "buildId": "1vvGJcqLAQ90Cvgl05EvM",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/p4wuvB7tQUUn5sF5mlHqO/_buildManifest.js"
+      src="/_next/static/1vvGJcqLAQ90Cvgl05EvM/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/p4wuvB7tQUUn5sF5mlHqO/_ssgManifest.js"
+      src="/_next/static/1vvGJcqLAQ90Cvgl05EvM/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for link.html
@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "p4wuvB7tQUUn5sF5mlHqO",
+        "buildId": "1vvGJcqLAQ90Cvgl05EvM",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/p4wuvB7tQUUn5sF5mlHqO/_buildManifest.js"
+      src="/_next/static/1vvGJcqLAQ90Cvgl05EvM/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/p4wuvB7tQUUn5sF5mlHqO/_ssgManifest.js"
+      src="/_next/static/1vvGJcqLAQ90Cvgl05EvM/_ssgManifest.js"
       async=""
     ></script>
   </body>
Diff for withRouter.html
@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "p4wuvB7tQUUn5sF5mlHqO",
+        "buildId": "1vvGJcqLAQ90Cvgl05EvM",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/p4wuvB7tQUUn5sF5mlHqO/_buildManifest.js"
+      src="/_next/static/1vvGJcqLAQ90Cvgl05EvM/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/p4wuvB7tQUUn5sF5mlHqO/_ssgManifest.js"
+      src="/_next/static/1vvGJcqLAQ90Cvgl05EvM/_ssgManifest.js"
       async=""
     ></script>
   </body>
Commit: ec7c02e

@timneutkens timneutkens merged commit 60b0267 into vercel:canary Jan 22, 2021
@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
examples Issue/PR related to examples
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants