critical-plugin for webpack

Extract your styles from js bundle and inlined the critical styles in your html

Install

$ npm install critical-plugin [--save-dev]

Setup

First, instantiate the plugin with options in your webpack.config:

// webpack.config.js example

var CriticalPlugin = require('critical-plugin');

module.exports = {
  // ...

  plugins: [
    // ... other plugins
    
    new CritialPlugin()
  ]
  // ...
}

Configuration

You must pass a hash of configuration options to the plugin to cause the addition of attributes. List of them you can find in this link

Plese note that, do not use the following options base, html, src, dest, css, folder, because the critical-plugin will do set them for you base on your project.

// webpack.config.js example

var CriticalPlugin = require('critical-plugin');

var criticalOptions = {
    // Inline the generated critical-path CSS
    // - true generates HTML
    // - false generates CSS
    inline: true,

    // Viewport width
    width: 1300,

    // Viewport height
    height: 900,

    // Minify critical-path CSS when inlining
    minify: true,

    // Extract inlined styles from referenced stylesheets
    extract: true,

    // Complete Timeout for Operation
    timeout: 30000,

    // Prefix for asset directory
    pathPrefix: '/MySubfolderDocrot',

    // ignore CSS rules
    ignore: ['font-face',/some-regexp/],

    // overwrite default options
    ignoreOptions: {}
};

module.exports = {
  // ...

  plugins: [
    // ... other plugins
    
    new CritialPlugin({ critical: criticalOptions })
  ]
  // ...
}

Articles

• Why should you use this in production? Read at Meduim

Like critical-plugin?

Support it by giving feedback, contributing or just by 🌟 starring the project!

Follow me to be notified about new releases.

Maintainers

Wizardnet972

License

MIT