Vite.js & Rollup plugin for generating critical CSS that uses the critical generator under the hood.
npm i -D rollup-plugin-critical// rollup.config.js
import PluginCritical from 'rollup-plugin-critical';
export default {
input: 'index.js',
output: {
dir: 'dist',
format: 'es',
},
plugins: [
PluginCritical({
criticalUrl: 'https://nystudio107.com/',
criticalBase: './',
criticalPages: [
{ uri: '', template: 'index' },
{ uri: 'about', template: 'about/index' },
],
criticalConfig: {
},
}),
],
}The base URL to use in combination with the criticalPages uris to determine the URLs to scrape for Critical CSS.
This can also be a file system path. This is combined with criticalPages.uri (see below) to determine pages to scrap for critical CSS.
Determines the criticalConfig.src property (see below)
The base file system path to where the generated Critical CSS file should be saved.
This is combined with criticalPages.template (see below) with _critical.min.css appended to it to determine the saved critical CSS file name.
Determines the criticalConfig.target property (see below)
An array objects that contain the page uris that are combined with the criticalUrl to determine the URLs to scrape for Critical CSS.
The resulting files are named with the template path, and saved to the criticalBase directory
This is the full config for critical that is passed through to the critical package.
You may optionally override any properties you like here. The default values passed in are:
const defaultCriticalConfig: Partial<CriticalConfig> = {
inline: false,
extract: false,
width: 1200,
height: 1200,
penthouse: {
blockJSRequests: false
}
};The following critical config properties are set dynamically by rollup-plugin-critical, but can be overridden via criticalConfig:
css- set to the css files that are generated in the Rollup buildbase- property is set tocriticalBasesrc- derived fromcriticalUrlandcriticalPages.uritarget- derived fromcriticalPages.templatewith_critical.min.cssappended to it. If theinlineoption is set totrue, the suffix.htmlis appended instead.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent