webpack-critical
Extracts & inlines Critical CSS with Webpack
Install
$ npm install webpack-critical --save-dev
Important: You must also install & configure
html-webpack-plugin!
Usage
// webpack.config.js
const { resolve } = require('path');
const HTML = require('html-webpack-plugin');
const WebpackCritical = require('webpack-critical');
const dist = resolve('build');
module.exports = {
output: {
path: dist
},
// ...
plugins: [
new HTML({ ... })
new WebpackCritical({
context: dist,
ignore: [/bootstrap/, '@font-face']
})
]
}API
WebpackCritical(options)
options.context
Type: String
Default: process.cwd()
The directory context to search for your (built) stylesheet.
Note: In most cases, this should match your
output.pathvalue.
options.ignore
Type: String, RegExp, Function, or Array
Default: ['@font-face', /import/, /url\(/]
Patterns to ignore CSS styles or files. Refer to filter-css for more information.
options.stylesheet
Type: String
Default: null
The filename or filepath (relative to context) of a specific CSS stylesheet to use for inlining.
If no value is passed, the primary CSS asset is used (as determined by html-webpack-plugin). If you are extracting a stylesheet, this will be the correct value 99% of the time.
Credit
Inspired by Dan Denny's article on Building a Small PWA with Preact and Firebase, which lead me to take a much closer look at critical, maintained by Addy Osmani and Ben ZΓΆrb.
License
MIT Β© Luke Edwards