Webpack plugin for the critical CSS inliner library.
MIT License
This plugin extracts critical CSS and runs after all files have been emitted so you can use it after Mini CSS Extract Plugin and HTML Webpack Plugin.
npm i --save-dev html-critical-webpack-plugin-pro
Note: As critical itself has a dependency on puppeteer in order to run Headless Chrome, consumers of this plugin will need to make sure that their build environment (local, CI, etc) where they are running Webpack with this plugin has the necessary operating system packages installed. See this page for more information on troubleshooting puppeteer.
...
const HtmlCriticalWebpackPluginPro = require("html-critical-webpack-plugin-pro");
module.exports = {
mode: 'production',
plugins: [
new HtmlWebpackPlugin({ ... }),
new MiniCssExtractPlugin({ ... }),
new HtmlCriticalWebpackPlugin({
base: path.resolve(__dirname, 'dist'),
src: 'index.html',
dest: 'index.html',
inline: true,
minify: true,
extract: true,
width: 375,
height: 565,
penthouse: {
blockJSRequests: false,
},
excludedSources: [
'excluded.css'
]
})
]
...
};
Note: Order is import here since critical, the underlying package used by this plugin, only operates against the file system, and not against webpack's build time compilation. The order of operations by critical is as such:
npm run test
npm run ci
npm run build