-
Notifications
You must be signed in to change notification settings - Fork 27k
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
Conversation
Stats from current PRDefault Server Mode (Decrease detected ✓)General
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 | |
/error-in-render avg req/sec | 2361.13 | 2224.68 |
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 | |
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 | ✓ |
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? |
@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? |
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 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 |
@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. |
I've tried it myself and the babel plugin does not work because you create a custom instance of emotion and import it in When you change the import in 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? |
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. |
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. |
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. the version in this pull request looks like: |
… packages directly
…ext.js into feature/vanilla-emotion
@leodr Thanks for your input here. Much appreciated. I managed to get it working 😉 - New PR above. |
Stats from current PRDefault Server Mode (Increase detected
|
vercel/next.js canary | MMT-LD/next.js feature/vanilla-emotion | Change | |
---|---|---|---|
buildDuration | 8.8s | 8.9s | |
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 | |
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 | ✓ |
Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
Stats from current PRDefault Server Mode (Increase detected
|
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 | ✓ |
Failing test suitesCommit: f13229d test/integration/dist-dir/test/index.test.js
Expand output● distDir › should handle null/undefined distDir
|
Stats from current PRDefault Server Mode (Increase detected
|
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 | ✓ |
@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? |
Stats from current PRDefault Server Mode (Decrease detected ✓)General
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 | |
/ avg req/sec | 1511.05 | 1464.94 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.063 | 1.116 | |
/error-in-render avg req/sec | 2352.14 | 2240.78 |
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 | |
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 | |
/ avg req/sec | 1512.97 | 1470.74 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.025 | 1.044 | |
/error-in-render avg req/sec | 2438.69 | 2394.04 |
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>
Thanks, this looks good to merge now! |
Stats from current PRDefault Server Mode (Increase detected
|
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 | |
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 | |
/ avg req/sec | 1422.58 | 1367.51 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.121 | 1.154 | |
/error-in-render avg req/sec | 2230.13 | 2165.98 |
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>
This pull request addresses #20199 for the vanilla emotion example.