Beasties

> Beasties is a plugin that inlines your app's [critical CSS] and lazy-loads the rest. It is a maintained fork of GoogleChromeLabs/critters

beasties 

It's a little different from other options, because it doesn't use a headless browser to render content. This tradeoff allows Beasties to be very fast and lightweight. It also means Beasties inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see Similar Libraries.

Beasties' design makes it a good fit when inlining critical CSS for prerendered/SSR'd Single Page Applications. It was developed to be an excellent compliment to prerender-loader, combining to dramatically improve first paint time for most Single Page Applications.

Features

- Fast - no browser, few dependencies
- Integrates with Webpack [beasties-webpack-plugin]
- Supports preloading and/or inlining critical fonts
- Prunes unused CSS keyframes and media queries
- Removes inlined CSS rules from lazy-loaded stylesheets

Installation

First, install Beasties as a development dependency:

``sh
npm i -D beasties
`

or

`sh
yarn add -D beasties
`

Simple Example

`js
import Beasties from 'beasties'

const beasties = new Beasties({
// optional configuration (see below)
})

const html =

`js
// vite.config.ts
import { defineConfig } from 'vite'
import { beasties } from 'vite-plugin-beasties'

export default defineConfig({
plugins: [
beasties({
// optional beasties configuration
options: {
preload: 'swap',
}
})
]
})
`

The plugin will process the output for your index.html and inline critical CSS while lazy-loading the rest.

Usage with webpack

Beasties is also available as a Webpack plugin called beasties-webpack-plugin. ![npm](https://www.npmjs.org/package/beasties-webpack-plugin)

The Webpack plugin supports the same configuration options as the main beasties package:

`diff
// webpack.config.js
+const Beasties = require('beasties-webpack-plugin');

module.exports = {
plugins: [
+ new Beasties({
+ // optional configuration
+ preload: 'swap',
+ })
]
}
`

That's it! The resultant html will have its critical CSS inlined and the stylesheets lazy-loaded.

Usage

$3

All optional. Pass them to new Beasties({ ... }).

#### Parameters

- options

#### Properties

- path String Base path location of the CSS files _(default: '')_
- publicPath String Public path of the CSS resources. This prefix is removed from the href _(default: '')_
- external Boolean Inline styles from external stylesheets _(default: true)_
- remote Boolean Download and inline remote stylesheets (http://, https://, //) _(default: false)_
- inlineThreshold Number Inline external stylesheets smaller than a given size _(default: 0)_
- minimumExternalSize Number If the non-critical external stylesheet would be below this size, just inline it _(default: 0)_
- pruneSource Boolean Remove inlined rules from the external stylesheet _(default: false)_
- mergeStylesheets Boolean Merged inlined stylesheets into a single