critical-plugin for webpack
Extract your styles from js bundle and inlined the critical styles in your html
critical-plugin for webpackExtract 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:
```js
// 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](https://github.com/addyosmani/critical#options)
> 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.
```js
// 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](https://medium.com/@wizardnet972/https-medium-com-wizardnet972-make-your-page-rendering-faster-e14a95747c7a)
# Like critical-plugin?
Support it by giving feedback, contributing or just by 🌟 starring the project!
Follow me [](https://twitter.com/wizardnet972) to be notified about new releases.
# Maintainers
Wizardnet972
|