webpack-critical-styles-plugin v0.0.3

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