webpack-critical-styles-plugin

Inline above the fold CSS with Webpack + Penthouse

Install

npm install --save-dev webpack-critical-styles-plugin

Description

This plugin integrates penthouse with Webpack and is heavily inspired by critical. Unfortunately critical and some of it's dependencies depend on the file being written to disk which does not play nicely with Webpack. This is where webpack-critical-styles-plugin fits in.

Goals of this plugin:

• Provide an easy way to extract "above the fold" styles with Webpack.
• Better support for Single Page Applications by providing a way to proxy requests to real APIs.

Limitations

• Currently limited to one HTML file (support for more to come).
• Requires HTML file created by Webpack.
• Requires CSS files created by Webpack.
• No Webpack 4 support (yet).
• No sourcemap support (hopefully to come).

Usage

const CriticalStylesPlugin = require('webpack-critical-styles-plugin');
 
module.exports = {
    ...,
    new HtmlWebpackPlugin({ ... }),
 
    new ExtractTextPlugin({ ... }),
 
    new CriticalStylesPlugin({
        urls: [ '/', '/not-found' ],
 
        filename: 'css/[name].[id].[contenthash].[hash].css',
 
        extract: true,
 
        excludeChunks: [ 'chunk-to-exclude' ],
 
        externals: { path: '/myapp/static/', root: './static' },
 
        proxy: {
            '/api/v1': {
                target: 'https://mysite.com/'
            }
        },
 
        dimensions: [
            { width: 900, height: 1300 }
        ],
 
        penthouse: {
            blockJSRequests: false,
            ...
        }
    }),
}

Options

Name	Type	Default	Description
urls	array	['/']	Urls to extract critical CSS from.
filename	string	[name].css	Output filename, required if extract option is true.
extract	boolean	false	Remove inlined styles from webpack's CSS assets.
minify	boolean	false	Minify resulting CSS file with critical CSS extracted.
excludeChunks	array	[]	Chunks to exclude when extracting critical CSS.
externals	object	null	Properties are root (required) and path. root is passed to express.static and path can be used to prepend a path for external files such as app.use(<path>, express.static(<root>)).
proxy	object	null	Same as webpack's devServer.proxy option, uses http-proxy-middlware.
dimensions	array	[{   width: 900,   height: 1300 }]	An array of objects containing width and height.
parallel	integer	5	Number of penthouse jobs to run in parallel (maximum of 5).
stall	integer	null	Number of minutes to stall before running penthouse. Helpful for making sure your app is rendering correctly.
penthouse	object	{}	penthouse#options
ignore	array	[]	CSS rules to ignore. See filter-css for more details.
ignoreOptions	object	{}	filter-css#options