Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
critters-webpack-plugin
Advanced tools
Readme
critters-webpack-plugin inlines your app's critical CSS and lazy-loads the rest.
It's a little different from other options, because it doesn't use a headless browser to render content. This tradeoff allows Critters to be very fast and lightweight. It also means Critters inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see Similar Libraries.
Critters' design makes it a good fit when inlining critical CSS for prerendered/SSR'd Single Page Applications. It was developed to be an excellent compliment to prerender-loader, combining to dramatically improve first paint time for most Single Page Applications.
webpack-dev-server
/ webpack serve
First, install Critters as a development dependency:
npm i -D critters-webpack-plugin
Then, import Critters into your Webpack configuration and add it to your list of plugins:
// webpack.config.js
+const Critters = require('critters-webpack-plugin');
module.exports = {
plugins: [
+ new Critters({
+ // optional configuration (see below)
+ })
]
}
That's it! Now when you run Webpack, the CSS used by your HTML will be inlined and the imports for your full CSS will be converted to load asynchronously.
Extends Critters
Create a Critters plugin instance with the given options.
options
Options Options to control how Critters inlines CSS. See https://github.com/GoogleChromeLabs/critters#usage// webpack.config.js
module.exports = {
plugins: [
new Critters({
// Outputs: <link rel="preload" onload="this.rel='stylesheet'">
preload: 'swap',
// Don't inline critical font-face rules, but preload the font URLs:
preloadFonts: true
})
]
}
There are a number of other libraries that can inline Critical CSS, each with a slightly different approach. Here are a few great options:
This is not an official Google product.
FAQs
Webpack plugin to inline critical CSS and lazy-load the rest.
The npm package critters-webpack-plugin receives a total of 8,259 weekly downloads. As such, critters-webpack-plugin popularity was classified as popular.
We found that critters-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.