You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 28, 2024. It is now read-only.
The following example shows how the Critical Webpack Plugin can be used to modify
the project's index.html file to inline only the (minified) CSS needed for the index page,
and asynchronously load the remaining CSS.
The only required option is dest and either src or 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.
Other than dest, all options are the same as Critical, so please see the
Critical options.
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
load.
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.
TypeScript Support
This plugin is written in TypeScript and includes TypeScript typings,
which should automatically work if using TypeScript 2.x+.
About
Webpack wrapper for @addyosmani's critical library.