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()
]
// ...
}
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 })
]
// ...
}
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
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 |