-
Notifications
You must be signed in to change notification settings - Fork 26.5k
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
Add with-extracted-stylesheet example #3451
Conversation
Look forward to use this feature !!!! |
@sheerun I have the feeling that this example does too much at once. You have a lot dependencies that don't seem to be necessary to get the extracted stylesheets working. |
I disagree, every part of this example is necessary to pass performance test on 100% on each page on each device type. If you strongly feel I should remove something, please point it explicitly. I could rename it to with-performant-stylesheet or something. |
In my opinion the example-section of next.js should be as simple as possible. Why do I need the editor.js? Why do I need a hero or your Logo? Also you do you need a lot of techniques to get the performance to 100%. |
editor.js is to showcase splitting that page loads with 100% performance on main page even though search.js is bloated with ace editor. Hero page showcases few important features: inlining background image into external css, inlining small logo file into html (with url-loader), shows that you can use modern SCSS framework and still achieve hot reloading and critical css, shows how to import single font-awesome icons so to avoid bloating external stylesheet. In my opinion this is a comprehensive and minimal example how to implement production-ready external css that at the same tame showcases all features so to prevent regressions. Indeed the example name could be with-performant-stylesheet instead with-external-stylesheet. Next already has the example how to implement non-performant external css (with-global-stylesheet), so there's no point for me to prepare striped version of this example. |
Can this be merged? |
Hi, I think is okay for the page to "heavy" in kb size so we can load test, however this has a some complexity. While I think is okay for files like Another issue it seems I think this PR would be great in the repository, can this be fixed? PS I also have the error in the with-external-scoped-css issue. |
To be honest, I don't think so. I tried to be as concise as possible in these scripts. Yarn start is not supposed to be used in development, but production. In development you use |
@sheerun Sorry my bad, |
"name": "with-next", | ||
"version": "1.0.0", | ||
"scripts": { | ||
"dev": "node bin/start", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
due to the code written (process.env.NODE_ENV === 'development'
) please use:
NODE_ENV=development node bin/start
I've fixed issue with env variables |
] | ||
}) | ||
|
||
config.module.rules.push({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
guess this can be changed to @zeit/next-css now that it uses extracted-loader 🕵️
This example is awesome but I agree next.js examples are way smaller. This one has a dockerfile and a bin folder which are usually per project kind of files, not next.js specific examples |
This is something I've been working for some time, and I think it is finally Good Enough™
This example shows how to setup production-grade next.js app with extracted stylesheets:
url()
in stylesheetsI made injecting critical stylesheets optional because it takes a long time to install critical. There are also two methods of deploying:
now --npm
that skips critical css injecting, andnow --docker
that takes longer but injects them. I developed https://github.com/sheerun/extracted-loader to achieve hot reloading of extracted stylesheets in development.All optimizations make first meaningful paint available in less than 200ms, even though the app-part of application is quite heavy (ACE-editor).
The demo is available for testing at:
https://with-extracted-stylesheet.now.sh/
I recommend testing for example with https://gtmetrix.com/
I hope you accept this example or even better: incorporate some of the ideas in next.js (e.g. per-device rendering, Link integrated with exported pages, stylesheet bundling baked in, hashes).