Critical-webpack-plugin NPM

Critical css Webpack plugin

Node dependency

Webpack wrapper for critical css generation

Extract critical css from html file, html input or remote URL to load CSS above the fold.

Installing

npm i critical-webpack-plugin

Getting started in webpack

Require critical-webpack-plugin

var CriticalWebpackPlugin = require('critical-webpack-plugin')

Add the plugin to your plugin list

var config = {
  plugins: [
    new CriticalWebpackPlugin({
      base: 'test',
      src: 'index.html',
      dest: '../build/main.css',
      css: ['node_modules/normalize.css/normalize.css'],
      width: 480,
      height: 800,
    })
  ]
}

Configuration

See critical package for options and webpack configuration files to see implementation.

Fetch content

This plugin allows to fetch remotely the content of a web page.

Example:

const options = {
  src: 'http://iscor.me',
  dest: '../build/main.css',
  css: ['node_modules/normalize.css/normalize.css'],
  width: 480,
  height: 800,
};

As this plugin is a wrapper, the critical library seems to not accept well a remote url, but the process is done normally.

Developing

git clone https://github.com/{your fork}/critical-webpack-plugin.git
cd critical-webpack-plugin/
npm install

Replace {your fork} by your github username.

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. All contributions are welcome. Please make a pull request and make sure things still pass after running npm test. Ensure you've read the contribution guidelines for more information and respect the code of conduct