nuxt-modules / critters Goto Github PK
View Code? Open in Web Editor NEWCSS optimization using critters for Nuxt
License: MIT License
CSS optimization using critters for Nuxt
License: MIT License
For example with vuetify nuxt critters adds 1sec render time to request, which isnt really usable for production.
With purged everything from css, i can get 300-400ms, whcih still a lot if we consider that its added on each request
i Inlined 1.15 kB (28% of original 3.98 kB) of inline CSS. 16:39:54
i Inlined 28.4 kB (17% of original 161 kB) of _nuxt/css/140be2a.css. 16:39:55
i Inlined 5.77 kB (22% of original 25.1 kB) of _nuxt/css/65cedc7.css. 16:39:55
i Inlined 1.98 kB (73% of original 2.71 kB) of _nuxt/css/396103a.css. 16:39:55
i Inlined 561 B (36% of original 1.52 kB) of _nuxt/css/8f8f4bf.css. 16:39:55
i Inlined 1.81 kB (95% of original 1.89 kB) of _nuxt/css/bb08894.css. 16:39:55
i Time 389.4243
So any ideas how to avoid adding this overhead on each request?
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@vitest/coverage-v8
, vitest
).github/workflows/ci.yml
actions/checkout v4@0ad4b8fadaa221de15dcec353f45205ec38ea70b
actions/setup-node v4
codecov/codecov-action v4
.github/workflows/release.yml
actions/checkout v4@0ad4b8fadaa221de15dcec353f45205ec38ea70b
actions/setup-node v4
package.json
@nuxt/kit 3.11.2
critters 0.0.22
pathe 1.1.2
ufo ^1.5.3
@nuxt/module-builder 0.6.0
@nuxt/test-utils 3.12.1
@vitest/coverage-v8 1.4.0
bumpp 9.4.0
eslint 9.0.0
lint-staged 15.2.2
nuxt 3.11.2
vitest 1.4.0
@nuxt/eslint-config 0.3.10
@nuxt/schema 3.11.2
pnpm 9.0.6
playground/package.json
nuxt 3.11.2
I noticed this plugin uses an outdated dependency that is currently XSS vulnerable, see GHSA-cx3j-qqxj-9597
Hopefully the critters dependency is updated to version 0.0.20
module: 0.5.1
nuxt: 2.17.1
critters: {
config: {
path: './.nuxt/dist/client',
external: true,
compress: true,
logLevel: 'debug'
}
},
It happens only in prod mode.
Issue happens when using redirect
at asyncData hook, it brokes whole app.
It happens whenever i use redirect inside asyncData and accessing direct page(direct by url, or reload page), not after client navigation
I can't share code, because it is quite complex application, you will not be able to run it by yourself.
I debuged by myself, and discover issue hapens because there is almost empty markup passed here
The app doesn't crash
App crash
Thanks.
Feel free to ping me, I can share more details if needed.
We should extend cspScriptSrcHashes
in render:route
hook
module: 0.5.2
nuxt: 3.8.2
@nuxtjs/critters
and add it is a module to the nuxt.config.ts
npm run generate
and observe the logsWARN Unable to locate stylesheet: /home/projects/github-ewfyox/.output/public/_nuxt/entry.34c992d7.css
I believe this should link to a reproduction where you just need to run npm run generate
:
https://stackblitz.com/edit/github-ewfyox?file=nuxt.config.ts
Critters should be able to successfully locate the stylesheets to process.
Critters is unable to do so and issues a warning.
I believe this issue is due to change in behavior between Nuxt 3.7.4 and Nuxt 3.8.2 where the _nuxt
directory is not copied to the .output/public
directory (i.e., nitro.options.output.publicDir
) until after the nitro prerender hooks are run (such as the one this module uses). I was able create a monkey-patched version of this module by using path.resolve(nuxt.options.buildDir, 'dist/client')
instead of nitro.options.output.publicDir
, but hopefully there is a more principled solution.
Hey there,
I realized that the Google font I'm using isn't included in the static sites generated with nuxt generate
assets/css/main.scss
/* rubik-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: url('../fonts/rubik-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
ssr: true,
app: {
pageTransition: { name: 'page', mode: 'out-in' },
},
css: ['~/assets/css/main.scss'],
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/critters'],
critters: {
// https://github.com/GoogleChromeLabs/critters#critters-2
config: {
preload: 'swap',
fonts: false,
},
},
});
Everything is working fine in dev (npm run dev
) but not for the static pages. The font is just not loading.
As soon as I remove the critters module, it's there. I played around with fonts: true
- didn't help.
Any idea?
Thanks!
module: 0.1.1
nuxt: 2.15.7
preloading external CSS shouldn't re-rendering the page
preloading external CSS forced the browser to rerender!
just use the module (and nothing else)
I think this is because of ordering (styles get overridden)
First of all, we have the inlined CSS in the head section.
After that, multiple external CSS files inserted with media preloading strategy.
When each file gets loaded, the browser re-render the page because other files not loaded yet, and the inlined CSS rules get overridden by the loaded external file.
this cycle gets happening until the last external CSS loaded.
module: 0.1.1
nuxt: 2.15.7
External CSS styles preloaded with media strategy
External CSS styles preloaded with the default strategy
just use the module (and nothing else)
When I hardcoded this line with the media
, this worked as expected (maybe there is a problem with the option
parameter?)
Adding options to module doesn't seems to do anything atm.
I would love to see this module support all the options of the critters package
I'm not sure how you guys go about changes like this, but I could add a PR with options support - unless you prefer to handle things like this on your own.
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: Cannot find preset's package (:automergeEarlyMondays). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.