wcc

webpack-critical-css-plugin

Webpack critical css plugin using penthouse

Showing:

Popularity

Downloads/wk

10

GitHub Stars

5

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

107.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Webpack critical css plugin

About

This is a Webpack plugin for generating critical css using penthouse. It creates a new file in the chunk with suffix .critical before file extension.

Eg:

Your output: styles.css

New output: styles.critical.css

Install

yarn add --dev webpack-critical-css-plugin

Usage

In your webpack.config.js:

const CriticalCssPlugin = require("webpack-critical-css-plugin");


const criticalHTML = {
  yourChunk: "file:///" + path.join(__dirname, "example.com.html"), // local html file
  anotherChunk: "https://example.com" // live url
};

entry: {
  yourChunk: path.join(__dirname, "yourChunk"),
  anotherChunk: path.join(__dirname, "anotherChunk"),
  yetAnotherChunk: path.join(__dirname, "yetAnotherChunkChunk"),
  ...
}

plugins: [
  ...,
  new CriticalCssPlugin({
    criticalHTML
  }),
  ...,
]

Author

Mạnh Tài

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial