beasties-webpack-plugin

Beasties Webpack plugin

beasties-webpack-plugin inlines your app's critical CSS and lazy-loads the rest.

beasties-webpack-plugin

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 html-webpack-plugin
• Works with webpack-dev-server / webpack serve
• 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:

npm i -D beasties-webpack-plugin

Then, import Beasties into your Webpack configuration and add it to your list of plugins:

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

module.exports = {
  plugins: [
+    new Beasties({
+      // optional configuration (see below)
+    })
  ]
}

That's it! Now when you run Webpack, the CSS used by your HTML will be inlined and the imports for your full CSS will be converted to load asynchronously.

Usage

BeastiesWebpackPlugin

Extends Beasties

Create a Beasties plugin instance with the given options.

Parameters

• options Options Options to control how Beasties inlines CSS. See https://github.com/danielroe/beasties#usage

Examples

// webpack.config.js
module.exports = {
  plugins: [
    new Beasties({
      // Outputs: <link rel="preload" onload="this.rel='stylesheet'">
      preload: 'swap',

      // Don't inline critical font-face rules, but preload the font URLs:
      preloadFonts: true
    })
  ]
}

Similar Libraries

There are a number of other libraries that can inline Critical CSS, each with a slightly different approach. Here are a few great options:

• Critical
• Penthouse
• webpack-critical
• webpack-plugin-critical
• html-critical-webpack-plugin
• react-snap

License

Apache 2.0

This is not an official Google product.