Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Evaluate App before Page in Dev for CSS Ordering #12090

Merged
merged 1 commit into from
Apr 22, 2020
Merged

Evaluate App before Page in Dev for CSS Ordering #12090

merged 1 commit into from
Apr 22, 2020

Conversation

Timer
Copy link
Member

@Timer Timer commented Apr 22, 2020 •
edited
Loading

This PR orders the Custom App script to execute before the Page Script.

Since these scripts are async, it really doesn't change production behavior—order doesn't matter (and CSS order is valid because we extract it).

However, in development, async scripts resolve instantly because they're on localhost, making async script act as if they were blocking in the first place.

This PR ensures _app is executed before the page, such that _app's styles are injected before CSS modules.

If we see this flake, we might need to use defer or drop async in development.

Also updated css-loader and style-loader while I was at it, but that's unrelated to the fix.

Fixes #12004

@Timer Timer added this to the 9.3.6 milestone Apr 22, 2020
@Timer Timer changed the title Evaluate App before Page for CSS Ordering Evaluate App before Page in Dev for CSS Ordering Apr 22, 2020
@ijjk
Copy link
Member

ijjk commented Apr 22, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/css-order Change
buildDuration 11s 11.2s ⚠️ +275ms
nodeModulesSize 55.6 MB 55.9 MB ⚠️ +356 kB
Page Load Tests Overall decrease ⚠️
zeit/next.js canary Timer/next.js hotfix/css-order Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.86 1.886 ⚠️ +0.03
/ avg req/sec 1344.11 1325.91 -18.2
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 0.937 0.994 ⚠️ +0.06
/error-in-render avg req/sec 2668.98 2514.95 -154.03
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/css-order Change
main-HASH.js gzip 6.25 kB 6.25 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.HASH.js gzip 39 kB 39 kB ✓
Overall change 56.7 kB 56.7 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js hotfix/css-order Change
main-HASH.module.js gzip 4.79 kB 4.79 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js hotfix/css-order Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB ✓
Overall change 26.2 kB 26.2 kB ✓
Client Pages
zeit/next.js canary Timer/next.js hotfix/css-order Change
_app.js gzip 1.23 kB 1.23 kB ✓
_error.js gzip 3.12 kB 3.12 kB ✓
hooks.js gzip 663 B 663 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.06 kB 2.06 kB ✓
routerDirect.js gzip 280 B 280 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.85 kB 7.85 kB ✓
Client Pages Modern
zeit/next.js canary Timer/next.js hotfix/css-order Change
_app.module.js gzip 598 B 598 B ✓
_error.module.js gzip 2.09 kB 2.09 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 279 B 279 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
zeit/next.js canary Timer/next.js hotfix/css-order Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes Overall decrease ✓
zeit/next.js canary Timer/next.js hotfix/css-order Change
index.html gzip 928 B 926 B -2 B
link.html gzip 937 B 937 B ✓
withRouter.html gzip 925 B 925 B ✓
Overall change 2.79 kB 2.79 kB -2 B

Diffs

Diff for index.html 
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/BUILD_ID/pages/index.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/BUILD_ID/pages/_app.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next">Hello world 👋</div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"BUILD_ID","isFallback":false,"gip":true}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/runtime/polyfills-51838dc5b2b8e0705281.js"></script><script async="" data-next-page="/" src="/_next/static/BUILD_ID/pages/index.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/" src="/_next/static/BUILD_ID/pages/index.module.js" crossorigin="anonymous" type="module"></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.module.js" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/webpack-4d739ac7b0d8f888ab18.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.3b8425c45afa36f5c6f7.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/main-8e87a07f5df19d12841f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/BUILD_ID/pages/_app.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/BUILD_ID/pages/index.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next">Hello world 👋</div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"BUILD_ID","isFallback":false,"gip":true}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/runtime/polyfills-51838dc5b2b8e0705281.js"></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.module.js" crossorigin="anonymous" type="module"></script><script async="" data-next-page="/" src="/_next/static/BUILD_ID/pages/index.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/" src="/_next/static/BUILD_ID/pages/index.module.js" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/webpack-4d739ac7b0d8f888ab18.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.3b8425c45afa36f5c6f7.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/main-8e87a07f5df19d12841f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script></body></html>
\ No newline at end of file
Diff for link.html 
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/BUILD_ID/pages/link.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/BUILD_ID/pages/_app.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div><h3>A Link page!</h3><a href="/">Go to /</a></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/link","query":{},"buildId":"BUILD_ID","isFallback":false,"gip":true}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/runtime/polyfills-51838dc5b2b8e0705281.js"></script><script async="" data-next-page="/link" src="/_next/static/BUILD_ID/pages/link.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/link" src="/_next/static/BUILD_ID/pages/link.module.js" crossorigin="anonymous" type="module"></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.module.js" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/webpack-4d739ac7b0d8f888ab18.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.3b8425c45afa36f5c6f7.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/main-8e87a07f5df19d12841f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/BUILD_ID/pages/_app.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/BUILD_ID/pages/link.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div><h3>A Link page!</h3><a href="/">Go to /</a></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/link","query":{},"buildId":"BUILD_ID","isFallback":false,"gip":true}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/runtime/polyfills-51838dc5b2b8e0705281.js"></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.module.js" crossorigin="anonymous" type="module"></script><script async="" data-next-page="/link" src="/_next/static/BUILD_ID/pages/link.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/link" src="/_next/static/BUILD_ID/pages/link.module.js" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/webpack-4d739ac7b0d8f888ab18.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.3b8425c45afa36f5c6f7.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/main-8e87a07f5df19d12841f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script></body></html>
\ No newline at end of file
Diff for withRouter.html 
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/BUILD_ID/pages/withRouter.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/BUILD_ID/pages/_app.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div>I use withRouter</div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/withRouter","query":{},"buildId":"BUILD_ID","isFallback":false,"gip":true}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/runtime/polyfills-51838dc5b2b8e0705281.js"></script><script async="" data-next-page="/withRouter" src="/_next/static/BUILD_ID/pages/withRouter.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/withRouter" src="/_next/static/BUILD_ID/pages/withRouter.module.js" crossorigin="anonymous" type="module"></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.module.js" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/webpack-4d739ac7b0d8f888ab18.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.3b8425c45afa36f5c6f7.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/main-8e87a07f5df19d12841f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/BUILD_ID/pages/_app.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/BUILD_ID/pages/withRouter.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" as="script" crossorigin="anonymous"/><link rel="preload" href="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" as="script" crossorigin="anonymous"/></head><body><div id="__next"><div>I use withRouter</div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="anonymous">{"props":{"pageProps":{}},"page":"/withRouter","query":{},"buildId":"BUILD_ID","isFallback":false,"gip":true}</script><script crossorigin="anonymous" nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" nomodule="" src="/_next/static/runtime/polyfills-51838dc5b2b8e0705281.js"></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/_app" src="/_next/static/BUILD_ID/pages/_app.module.js" crossorigin="anonymous" type="module"></script><script async="" data-next-page="/withRouter" src="/_next/static/BUILD_ID/pages/withRouter.js" crossorigin="anonymous" nomodule=""></script><script async="" data-next-page="/withRouter" src="/_next/static/BUILD_ID/pages/withRouter.module.js" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/webpack-4d739ac7b0d8f888ab18.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/webpack-d629b83a65f3e33fa99e.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/framework.5bb7f30f859f5f31359f.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.3b8425c45afa36f5c6f7.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/chunks/de003c3a9d308750aa009870a5926f9b18ab31f4.7d6979ed92064e0b8892.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/runtime/main-8e87a07f5df19d12841f.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/runtime/main-c815cde7aebdb2731e5c.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_buildManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_buildManifest.module.js" async="" crossorigin="anonymous" type="module"></script><script src="/_next/static/BUILD_ID/_ssgManifest.js" async="" crossorigin="anonymous" nomodule=""></script><script src="/_next/static/BUILD_ID/_ssgManifest.module.js" async="" crossorigin="anonymous" type="module"></script></body></html>
\ No newline at end of file
Serverless Mode
General Overall increase ⚠️
zeit/next.js canary Timer/next.js hotfix/css-order Change
buildDuration 11.9s 11.6s -283ms
nodeModulesSize 55.6 MB 55.9 MB ⚠️ +356 kB
Client Bundles (main, webpack, commons)
zeit/next.js canary Timer/next.js hotfix/css-order Change
main-HASH.js gzip 6.25 kB 6.25 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..5e5e.js gzip 10.3 kB 10.3 kB ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.HASH.js gzip 39 kB 39 kB ✓
Overall change 56.7 kB 56.7 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary Timer/next.js hotfix/css-order Change
main-HASH.module.js gzip 4.79 kB 4.79 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
Overall change 51.4 kB 51.4 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary Timer/next.js hotfix/css-order Change
polyfills-HASH.js gzip 26.2 kB 26.2 kB ✓
Overall change 26.2 kB 26.2 kB ✓
Client Pages
zeit/next.js canary Timer/next.js hotfix/css-order Change
_app.js gzip 1.23 kB 1.23 kB ✓
_error.js gzip 3.12 kB 3.12 kB ✓
hooks.js gzip 663 B 663 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.06 kB 2.06 kB ✓
routerDirect.js gzip 280 B 280 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.85 kB 7.85 kB ✓
Client Pages Modern
zeit/next.js canary Timer/next.js hotfix/css-order Change
_app.module.js gzip 598 B 598 B ✓
_error.module.js gzip 2.09 kB 2.09 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 279 B 279 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
zeit/next.js canary Timer/next.js hotfix/css-order Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary Timer/next.js hotfix/css-order Change
_error.js 558 kB 558 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.81 kB 3.81 kB ✓
index.js 558 kB 558 kB ✓
link.js 595 kB 595 kB ✓
routerDirect.js 587 kB 587 kB ✓
withRouter.js 587 kB 587 kB ✓
Overall change 2.89 MB 2.89 MB ✓

ijjk
ijjk approved these changes Apr 22, 2020
View reviewed changes
Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM double checked the test change catches a regression in this behavior locally, as mentioned in PR description we can swap to defer if this doesn't correct the behavior

@Timer Timer merged commit d8c71b1 into vercel:canary Apr 22, 2020
@Timer Timer deleted the hotfix/css-order branch April 22, 2020 03:55
This was referenced May 1, 2020
Closed
Closed
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk ijjk approved these changes

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens

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

Successfully merging this pull request may close these issues.

Hot reloading still loads CSS modules before global CSS
2 participants
@Timer @ijjk