wc

webpack-critical

Extracts & inlines Critical CSS with Wepack

Showing:

Popularity

Downloads/wk

2

GitHub Stars

106

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial