critters
critters copied to clipboard
CSS optimization using critters for Nuxt
@nuxtjs/critters
Features
- Zero-configuration required
- Enables CSS Extraction
- Critical CSS automatically injected to page
- Works with Nitro prerendering
Quick setup
- Add
@nuxtjs/critters
dependency to your project
yarn add @nuxtjs/critters # or npm install @nuxtjs/critters
- Add
@nuxtjs/critters
to themodules
section ofnuxt.config.js
{
modules: [
'@nuxtjs/critters',
],
}
How it works
Nuxt has a number of ways to optimize your CSS in production:
- ✅ Nuxt uses
cssnano
in the build step to minify CSS rules - 📦 You can enable
purgecss
to remove unused CSS rules from your bundle. - ✅ with
@nuxtjs/critters
you can now extract CSS files and load them separately, just inlining the CSS necessary to render the page.
Options
You can override the @nuxtjs/critters
defaults like this:
// nuxt.config.js
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: ['@nuxtjs/critters'],
critters: {
// Options passed directly to critters: https://github.com/GoogleChromeLabs/critters#critters-2
config: {
// Default: 'media'
preload: 'swap',
},
},
})
Development
- Clone this repository
- Install dependencies using
yarn install
- Start development server using
yarn dev
License
MIT License