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 = ; moduleexports = // ... plugins: // ... other plugins // ...
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 = ; 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: {}; moduleexports = // ... plugins: // ... other plugins 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 |