Skip to content

akash5474/webpack-critical-styles-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status Coverage Status

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published