critical-webpack-plugin
v0.4.0
Published
Webpack wrapper for critical css extraction
Downloads
70
Maintainers
Readme
Critical css Webpack plugin
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
Contributors
Thanks goes to these wonderful people (emoji key):
| Sebastien Correaud🚇 💻 📖 ⚠️ | | :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!
Licensing
The code in this project is licensed under MIT license.