Closed StirStudios closed 1 year ago
@StirStudios Critters should be easy to disable via disableNuxtCritters
.
https://nuxt-speedkit.grabarzundpartner.dev/v3/guide/options#disablenuxtcritters
@ThornWalli so sorry I missed that and wasting your time responding! Just tested and it works perfectly and we are still getting 100 lighthouse score. Keep up the great work!
Hello @StirStudios ,
I have made another modifications...
Critters is now disabled by default, makes problems when you work with fonts in nuxt-speedkit
because the HTML is emptied and you can not simply disable certain things.
But now there is a greater modification.
With Nuxt 3.7.2
the CSS in the Vite-Build can now be extracted, so it was possible to put the start CSS of Vite directly into the markup.
Instead of loading a CSS file or inserting it from critters
.
But this also means that with the use of nuxt-speedkit
you have to use the latest version of Nuxt... 3.7.2
.
Would be happy about a feedback from your side 🙂
Hello @ThornWalli,
Thanks so much for keeping us posted on progress!
We updated to Nuxt 3.7.2 and set disableNuxtCritters: false
but we get the following error on generate:
ERROR <css input>:1:1: Unknown word 2:46:09 AM
at Input.error (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/input.js:106:16)
at Parser.unknownWord (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parser.js:594:22)
at Parser.other (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parser.js:436:12)
at Parser.parse (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parser.js:471:16)
at parse (node_modules/.pnpm/postcss@8.4.29/node_modules/postcss/lib/parse.js:11:12)
at parseStylesheet (/project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:776:10)
at Critters.processStyle (/project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:1390:17)
at /project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:1135:48
at Array.map (<anonymous>)
at Critters.process (/project/node_modules/.pnpm/critters@0.0.19/node_modules/critters/dist/critters.mjs:1135:30)
Just in case we deleted node_modules and ran pnpm i
Any ideas?
@StirStudios I'll take a look! Now with Critters again? 🙃
@StirStudios I have now updated and understood that I have to be careful with critters.
if Critters is activated, the CSS is loaded normally. Here you can choose via vite.build.cssCodeSplit
whether one or x files are loaded per component.
Critters then decides which CSS from the files comes into the markup, a disadvantage I see in it, it is unnecessarily CSS reloaded.
if Critters is disabled, I take all CSS files that are initially available and embed them in the HTML files.
@ThornWalli just wanting to check something is not broken on my end:
"scripts": { "build": "nuxi build", "dev": "nuxi dev", "generate": "nuxi generate", "preview": "nuxi preview", "postinstall": "nuxi prepare", "lint": "eslint --ext .ts,.js,.vue, --ignore-path .gitignore .", "release": "release-it" }, "devDependencies": { "@bootstrap-vue-next/nuxt": "^0.12.3", "@nuxt/devtools": "^0.8.3", "@nuxt/image": "rc", "@types/node": "^20.6.0", "@typescript-eslint/eslint-plugin": "^6.7.0", "@typescript-eslint/parser": "^6.7.0", "@vue/eslint-config-typescript": "^12.0.0", "bootstrap": "^5.3.1", "bootstrap-vue-next": "^0.12.3", "eslint": "^8.49.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-vue": "^9.17.0", "nuxt": "^3.7.2", "nuxt-font-loader": "^2.3.4", "nuxt-gtag": "^1.1.0", "nuxt-icon": "^0.5.0", "nuxt-purgecss": "^2.0.0", "nuxt-seo-kit": "^1.3.13", "prettier": "^3.0.3", "release-it": "^16.1.5" }, "dependencies": { "aos": "^2.3.4", "nuxt-speedkit": "^3.0.0-next.24", "playwright": "^1.37.1" } }
I am always getting this now:
ERROR Cannot read properties of undefined (reading 'disableNuxtCritters')
Nuxt config:
[
'nuxt-speedkit',
{
disableNuxtCritters: true,
disableNuxtFontaine: true,
disableNuxtImage: true,
detection: {
performance: true,
browserSupport: true,
},
performanceMetrics: {
device: {
hardwareConcurrency: { min: 2, max: 48 },
deviceMemory: { min: 2 },
},
timing: {
fcp: 800,
dcl: 1200,
},
},
componentAutoImport: false,
componentPrefix: undefined,
lazyOffset: {
component: '0%',
asset: '0%',
},
},
],
Any ideas?
@StirStudios Gave another update 🙃 3.0.0-next.25
Had incorrectly retrieved the option.
mmm still getting the same error even with a node_modules purge.
Nuxt Config:
"nuxt-speedkit": "3.0.0-next.25",
Complete error:
ERROR Cannot read properties of undefined (reading 'disableNuxtCritters') 9:07:32 AM
at optimizePreloads (/project/node_modules/.pnpm/nuxt-speedkit@3.0.0-next.25_browserslist@4.21.10_vue@3.3.4/node_modules/nuxt-speedkit/dist/module.mjs:300:31)
at setup (/project/node_modules/.pnpm/nuxt-speedkit@3.0.0-next.25_browserslist@4.21.10_vue@3.3.4/node_modules/nuxt-speedkit/dist/module.mjs:471:7)
at async normalizedModule (/project/node_modules/.pnpm/@nuxt+kit@3.7.2/node_modules/@nuxt/kit/dist/index.mjs:2141:17)
at async installModule (/project/node_modules/.pnpm/@nuxt+kit@3.7.2/node_modules/@nuxt/kit/dist/index.mjs:2426:95)
at async initNuxt (/project/node_modules/.pnpm/nuxt@3.7.2_@types+node@20.6.0_eslint@8.49.0_typescript@5.2.2/node_modules/nuxt/dist/index.mjs:3547:7)
at async loadNuxt (/project/node_modules/.pnpm/nuxt@3.7.2_@types+node@20.6.0_eslint@8.49.0_typescript@5.2.2/node_modules/nuxt/dist/index.mjs:3632:5)
at async loadNuxt (/project/node_modules/.pnpm/@nuxt+kit@3.7.2/node_modules/@nuxt/kit/dist/index.mjs:2571:19)
at async Object.run (/project/node_modules/.pnpm/nuxi@3.8.3/node_modules/nuxi/dist/chunks/prepare.mjs:59:18)
at async runCommand$1 (/project/node_modules/.pnpm/nuxi@3.8.3/node_modules/nuxi/dist/shared/nuxi.46d00f54.mjs:1647:7)
at async runCommand$1 (/project/node_modules/.pnpm/nuxi@3.8.3/node_modules/nuxi/dist/shared/nuxi.46d00f54.mjs:1638:11)
ERROR Cannot read properties of undefined (reading 'disableNuxtCritters')
I'm ashamed to say I forgot something else. Not noticeable if property is included in the nuxt.config.
The next release should work. 3.0.0-next.26
https://github.com/GrabarzUndPartner/nuxt-speedkit/actions/runs/6175208685
No worries, this is a great module and glad I can help test and fix. This time it does work, I now only get a warning:
WARN [nuxt] Could not resolve /project/.nuxt/nuxt-speedkit/plugin.server.js.
I get the message too, from time to time even from other plugins... Watch this, came with the latest Nuxt version.
Good too know, it is only a warning so assume it will get fixed with a Nuxt update! Keep up the great work and always happy to help.
Could a feature be added to disable critters?
We've been testing on a website that uses color mode switching, but we're having trouble getting it to recognize the modes and remove non-critical elements.
Currently, we're using Nuxt Purge with the following settings, and color modes are functioning properly:
When we include Nuxt Speed Kit, our Lighthouse score improves to 100 in all aspects, which is excellent. However, it disrupts the color mode.
Since your module includes critters, we have attempted to assign importance to the selectors:
But absolutely no luck.