addyosmani / addyosmani/critical
Merge classes of multiple pages in one file
- 主要语言
- JavaScript
- 星标
- 10.3k
- 派生
- 390
- PR 合并指标
- 30 天内没有已合并 PR
描述
For a very large project with over 2k pages and 30+ layouts, we use [critical](https://github.com/nystudio107/rollup-plugin-critical) and that uses your library under the hood. Basically, it is possible to define uris and the template path. Critical css gets generated from the uri and the template path is just for including it into the right template.
Such a config looks like that:
```javascript
critical({
criticalUrl: env.VITE_PRIMARY_SITE_URL,
criticalBase: 'web/dist/criticalcss',
criticalPages: [
{ uri: '/', template: '_layouts/home' },
{ uri: '/content-guidelines/default-pagebuilder', template: '_layouts/default_pageBuilder' },
],
criticalConfig: {
width: 1680,
height: 1200,
user: env.VITE_BASIC_AUTH_KEY,
pass: env.VITE_BASIC_AUTH_KEY,
request: {
https: {
rejectUnauthorized: false,
},
},
},
}),
```
## Problem
The problem is that layout 1, for example, is used for 500 pages. If layout 1 looks different for 100 pages due to e.g. a different hero variant, the critical css will be generated correctly for either 100 or 400 pages. Because I can't use two urls with different heros for one style sheet.
## Solution
It would be cool if something like this would be possible:
```javascript
criticalPages: [
{ uri: ['/slug1', '/slug2'], template: '_layouts/default_teasers' },
],
```
And the CSS classes could then be merged into a single stylesheet.
If you need more information feel free to ask :)
贡献指南
评估
这个 Issue 还没有评估数据。