Noodle Printing Machine

    webpack-plugin-critical
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Critical Webpack Plugin

    This is a webpack wrapper around Addy Osmani's critical library, which helps to inline minimum necessary CSS in HTML documents to prevent stylesheet loading from blocking the Critical Rendering Path.

    Install

    $ npm install webpack-plugin-critical
    

    Usage

    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.

    webpack.config.js

    const CriticalPlugin = require('webpack-plugin-critical').CriticalPlugin;
    ...
    plugins: [
      new CriticalPlugin({
        src: 'index.html',
        inline: true,
        minify: true,
        dest: 'index.html'
      })
    ]
    ...

    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.

    Why?

    When the browser sees this in a page:

    <link rel="stylesheet" href="mystyle.css">

    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.

    <style>
    .home-heading { font-size: 20pt; }
    </style> 
    <link rel="preload" href="mystyle.css" onload="this.rel='stylesheet'">

    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+.

    Install

    npm i webpack-plugin-critical

    DownloadsWeekly Downloads

    90

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • jeffbcross