Critical CSS plugin

sage
6

So I’ve managed to make some progress using critical-webpack-plugin. I’ve added the following to the webpack.config.optimize.js file to get it to generate a critical css file and then use the above code example to inject critical assets. (Replacing path/to/site with the url to your site).

const CriticalWebpackPlugin = require('critical-webpack-plugin');
module.exports = {
plugins: [
new ImageMinPlugin(...),
new CriticalWebpackPlugin({
      src: 'http://path/to/site',
      dest: 'critical.css',
      width: 480,
      height: 800,
      pathPrefix: '/styles',
      minify: true
    }),
]
}
1 Like