html-webpack-critical-plugin

Critical Path Plugin for webpack

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

Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.

Why you should use it in production? Read at Meduim

Follow me to be notified about new releases.

Install

$ npm install html-webpack-critical-plugin --save-dev

# if you want you can use dependencies:

$ npm install mini-css-extract-plugin --save-dev
$ npm install html-webpack-plugin --save-dev

Usage

webpack.config.js

const HtmlWebpackCriticalPlugin = require('html-webpack-critical-plugin');
...
plugins: [
 
    new HtmlWebpackCriticalPlugin(),
 
    // // or with options from https://github.com/addyosmani/critical#options
    // new HtmlWebpackCriticalPlugin({
    //   critical: {
    //     inline: true
    //   }
    // })
 
    new HtmlWebPackPlugin(),
    
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
 
    // only in the next version for webpack4
    // new ExtractTextPlugin({
    //     filename: "[name].[contenthash].css"
    // }),
 
    // if you use HtmlWebpackInlineSVGPlugin you should pass runPreEmit.  
    // new HtmlWebpackInlineSVGPlugin({
    //   runPreEmit: true
    // }),
]
...

Maintainers

Wizardnet972

License

MIT