Critical Webpack Plugin
$ npm install webpack-plugin-critical
The following example shows how the Critical Webpack Plugin can be used to modify
index.html file to inline only the (minified) CSS needed for the index page,
and asynchronously load the remaining CSS.
const CriticalPlugin = CriticalPlugin;...plugins:src: 'index.html'inline: trueminify: truedest: 'index.html'...
The only required option is
dest and either
html, since without dest, the output would
be lost. When using Critical directly (instead of using this plugin),
dest isn't required because the
callback can accept the HTML or CSS output as a parameter.
dest, all options are the same as Critical, so please see the
When the browser sees this in a page:
The browser stops, loads the stylesheet and its dependencies, and cannot continue
rendering the page until the stylesheet is loaded and parsed.
So the user sees an empty screen while they wait for every stylesheet and script to
The critical library solves this problem by figuring out what CSS is actually needed
for a given page, inlining the CSS into a
<style> tag, and asynchronously loading the remaining CSS.
By loading the stylesheet using
preload instead of
stylesheet, the browser
can begin downloading the stylesheet in the background, which comes in handy
in single page applications where additional views may be loaded that depend
on rules from the full stylesheet.
This plugin is written in TypeScript and includes TypeScript typings, which should automatically work if using TypeScript 2.x+.