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.path
value.
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